FAQ Вёрстка на слоях. Учимся создавать таблицу

Администратор · Регистрация: 27.02.2009

Для начала разберёмся с тем, как же на слоях создаёются сложные каркасы макетов, которые так просто создать с помощью таблиц. Всё просто – есть парочка секретов, которые нам быстро помогут разобраться с этим.

И так, подобная конструкция создаст нам таблицу с ячейками (две строки, в каждой по две ячейки):

PHP код:



<table border="1">
<tr>
<td width="50%">
1.1
</td>
<td width="50%">
1.2
</td>
</tr>
<tr>
<td width="50%">
2.1
</td>
<td width="50%">
2.2
</td>
</tr>
</table>

Подобную конструкцию мы можем создать и с помощью слоёв, это будет выглядеть намного аккуратнее, красивее и вообще профессиональнее:

PHP код:



<div>
<div style="float: left; width: 49%;">1.1</div>
<div style="float: right; width: 49%;">1.2</div>
<div style="float: left; width: 49%;">2.1</div>
<div style="float: right; width: 49%;">2.2</div>
<div style="clear: both;"></div>
</div>

Все свойства можно простов вывести в CSS и будет всё намного лучше смотрется. Сам html код:

PHP код:



<div>
<div class="left">1.1</div>
<div class="right">1.2</div>
<div class="left">2.1</div>
<div class="right">2.2</div>
<div class="clear"></div>
</div>

CSS для кода:

PHP код:



<style type="text/css">
div {
border: 1px solid red;
}
.left {
float: left;
width: 49%;
}
.right {
float: right;
width: 49%;
}
.clear {
clear: both;
}
</style>

Самый нижний блок создан для того, что бы вся конструкция не «расползалась» в некоторых браузерах, например всё тот же Internet Explorer. Как видите, ничего сложного здесь нет!

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид