Универсальная сетка
- .oh,.ot,.tt{
- float: left;
- padding:0 1%;
- margin: 0;
- }
- .ot{width:31%;}
- .oh{width:48%;}
- .tt{width:65%;}
Универсая резиновая сетка.
описание элементов:
ot - 1/3 ширины родителя
tt - 2/3 ширины родителя
oh - 1/2 ширины родителя
В использовании очень проста, комбинируя элементы можно построить практически любую сетку.
Примеры:
два блока в ряд
<div class="oh">первый</div>
<div class="oh">второй</div>
два блока в ряд(первый больше второго
<div class="tt">первый</div>
<div class="ot">второй</div>
три блока в ряд
<div class="ot">первый</div>
<div class="ot">второй</div>
<div class="ot">третий</div>
четыри в ряд
<div class="oh">
<div class="oh>первый</div>
<div class="oh>второй</div>
</div>
<div class="oh">
<div class="oh">третий</div>
<div class="oh">четвертый</div>
</div>
пять в ряд
<div class="tt">
<div class="ot">первый</div>
<div class="ot">второй</div>
<div class="ot">третий</div>
</div>
<div class="ot">
<div class="oh">четвертый</div>
<div class="oh">пятый</div>
</div>
Дальше писать не буду и так думаю ясно стало
описание элементов:
ot - 1/3 ширины родителя
tt - 2/3 ширины родителя
oh - 1/2 ширины родителя
В использовании очень проста, комбинируя элементы можно построить практически любую сетку.
Примеры:
два блока в ряд
<div class="oh">первый</div>
<div class="oh">второй</div>
два блока в ряд(первый больше второго
<div class="tt">первый</div>
<div class="ot">второй</div>
три блока в ряд
<div class="ot">первый</div>
<div class="ot">второй</div>
<div class="ot">третий</div>
четыри в ряд
<div class="oh">
<div class="oh>первый</div>
<div class="oh>второй</div>
</div>
<div class="oh">
<div class="oh">третий</div>
<div class="oh">четвертый</div>
</div>
пять в ряд
<div class="tt">
<div class="ot">первый</div>
<div class="ot">второй</div>
<div class="ot">третий</div>
</div>
<div class="ot">
<div class="oh">четвертый</div>
<div class="oh">пятый</div>
</div>
Дальше писать не буду и так думаю ясно стало