Пара вариантов div столбиков …

by Опубликовано

Когда то это была для меня очень больная тема … сейчас вроде что то понятно … Многие искали, а может быть и ищут варианты 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>

Варианты выдрал из исходников какого то сайта …

Если кто то знает лучше — милости прошу в комментарии !

Опубликовано p.b.Leo

WTF ?