Универсальная сетка

  1. .oh,.ot,.tt{
  2.     float: left;
  3.     padding:0 1%;
  4.     margin: 0;
  5. }
  6. .ot{width:31%;}
  7. .oh{width:48%;}
  8. .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>
Дальше писать не буду и так думаю ясно стало:)

Реклама

Мы в соцсетях

tw tg yt gt