Блог Интернет Технологий

На одном форуме нашел вопрос:
Делается верстка трех блоков в строку. Центральный имеет фиксированную ширину, остальные тянутся занимая оставшееся пространство.

Ну сразу мысли какие? Никакие... Есть вариант использовать таблицы, jQuery или блоки с абсолютным позиционированием.

Сейчас я покажу вам три варианта реализации, и вы уже будете выбирать для себя наиболее подходящий.

1. Таблицы

Html:

<table id="table">
<tr>
<td class="t-one"> </td>
<td class="t-two"> Center </td>
<td class="t-three"> </td>
</tr>
</table>

Css:

#table{width:100%;margin-bottom:10px;border-collapse:collapse}
.t-one, .t-three{background:#ddd;}
.t-two{width:300px;background:#69cee8;}

Все работает? Нет, нет... Если содержимое боковых блоков будет разным, то центральная колонка не будет расположена по центру!

2. Блоки с абсолютным позиционированием

Html:

<div id="centerCol">Two</div>
<div id="leftSect">
<div id="leftCol">One</div>
</div>
<div id="rightSect">
<div id="rightCol">Three</div>
</div>

Как видите, центральный блок в коде находится впереди.

Css:

#centerCol{width:300px;background:#69cee8;}
#leftCol, #rightCol{background:#ddd;}
#leftCol, #rightCol, #centerCol{padding:2px 3px;}
.name{padding:5px 15px;margin-top:20px;}
#centerCol{position:absolute;left:50%;margin-left:-153px;}
#leftSect, #rightSect{width:50%;}
#leftSect{float:left;}
#rightSect{float:right;}
#leftCol{margin-right:153px;}
#rightCol{margin-left:153px;}

Если вы плохо понимаете css, то лучше вам этот пример не использовать.

3. Блоки и jQuery скрипт

Сама jQuery библиотека, в сжатом виде, весит не менее 55 киБ. Плюс еще вес самого скрипта и страницы. Получается многова-то. Но если у вас библиотека уже подключена, то этот пример можно использовать.

Html:

<div id="one">
One
</div>
<div id="two">
Two
</div>
<div id="three">
Three
</div>

CSS:

#one, #two, #three{float:left;}
#two{width:300px;background:#69cee8;}
#one, #three{background:#ddd;}
#one, #two, #three{padding:2px 3px;}

jQuery скрипт:

<script type="text/javascript" charset="utf-8">
<!--//<![CDATA[
$(document).ready(function(){
function wdi() { // Функция, которая высчитывает ширину блокам.
var w = $(window).width(); // Заменяем ширину window переменной.
var b = $("#two").width(); // Заменяем ширину блока #two переменной.
$("#one, #three").css("width", (w-b)/2); // Заменяем ширину первого и третьего блоков формулой: ширина окна - ширина блока и делим на два.
}
wdi(); // Функция вызывается при загрузке страницы.
$(window).resize(function () { // При ручном ресайзе окна, заного выполняем функцию wdi.
wdi();
});
});
//]]>-->
</script>

Теперь все работает. Если вы уже используете jQuery скрипты на своем сайте, то это решение вам точно подойдет. Однако есть одно но, работает скрипт при ресайзе, с маленькой задержкой.

Вы увидели три, абсолютно разных варианта решения.
Первый — минимум кода. Но использование таблицы, это мне не совсем нравится. Второй — используем абсолютное позиционирование. Хотя пример хороший, вы можете смело его использовать. Третий — использование jQuery скрипта. Большая прибавка к весу вашей страницы.

Для наглядности, проверьте сразу все примеры:

Каким вариантом пользоваться, решайте сами. Все плюсы и минусы каждого из примеров описаны в этой статье.