Пара вариантов div столбиков …
Когда то это была для меня очень больная тема … сейчас вроде что то понятно … Многие искали, а может быть и ищут варианты div верстки … ну и я не долго думая выложу 2 варианта div верстки …
ps.: расписывать особо не буду, т.к. лень … найду время или будет мотивация — распишу подробнее … а сейчас тупо код (главное рабочий)
Вариант 1 — в 2 столбика …
<!-- 2 столбика --><style> .col2 { clear: both; width: 100%; position:relative; } .col2-1 { float: left; width: 65%; margin-right:5%; position: relative;} .col2-2 { float: left; width: 30%; clear: right; position: relative;}</style><div class="col2"> <div class="col2-1">Строка 1 столбик 1</div> <div class="col2-2">Строка 1 столбик 2</div> <div class="col2-1">Строка 2 столбик 1</div> <div class="col2-2">Строка 2 столбик 2</div> <div class="col2-1">Строка 3 столбик 1</div> <div class="col2-2">Строка 3 столбик 2</div> <div class="col2-1">Строка 4 столбик 1</div> <div class="col2-2">Строка 4 столбик 2</div> <div class="col2-1">Строка 5 столбик 1</div> <div class="col2-2">Строка 5 столбик 2</div></div> |
Вариант 2 — в 3 столбика …
<!--3 столбика div--><style> .col3 { clear: both; width: 100%; position:relative;} .col3-1, .col3-2, .col3-3 { float: left; width: 30%; position:relative; } .col3-1, .col3-2 { margin-right:5% }</style><div class="col3"> <div class="col3-1">Строка 1 Столбик 1</div><div class="col3-2">Строка 1 Столбик 2</div><div class="col3-3">Строка 1 Столбик 3</div> <div class="col3-1">Строка 2 Столбик 1</div><div class="col3-2">Строка 2 Столбик 2</div><div class="col3-3">Строка 2 Столбик 3</div></div> |
Варианты выдрал из исходников какого то сайта …
Если кто то знает лучше — милости прошу в комментарии !