Ответы пользователя по тегу HTML
  • Верстка: выравнивание блоков по ширине

    Shvonder
    @Shvonder
    Я думаю без скриптов тут не обойтись. Сделал пример с использованием jQuery. Проверил только в FF 3.6:
    <style>
    	div.item {width: 250px; height: 150px; background: red; float: left;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function ()
    	{
    		changeMargin();
    	});
    	$(window).resize(function()
    	{
    		changeMargin();
    	});
    	function changeMargin()
    	{
    		var container_width = $('div.container').width();
    		var item_width = $('div.item').width();
    		var items_count = Math.floor(container_width / item_width);
    		var items_width = item_width * items_count;
    		var difference = container_width - items_width;
    		var margin = difference / (items_count - 1);
    		$('div.item').each(function(index)
    		{
    			if (index > 0 && index % items_count != 0)
    				$(this).css('margin-left', margin+'px');
    			else
    				$(this).css('margin-left', '0px');
    		});
    	}
    </script>
    <div class="container">
    	<div class="item">1</div>
    	<div class="item">2</div>
    	<div class="item">3</div>
    	<div class="item">4</div>
    	<div class="item">5</div>
    	<div class="item">6</div>
    	<div class="item">7</div>
    	<div class="item">8</div>
    </div>
    
    Ответ написан
    4 комментария