Pull to refresh

Верстка текста в две колонки на чистом CSS

Reading time 2 min
Views 8.7K
Данный пост навеян моим же предыдущим топиком, в котором монолитный текст делился на две колонки при помощи JS. В комментах прозвучала фраза типа «С JS и дурак сделает, вот бы на чистом CSS».
Алгоритм не изменен, суть остается та же. Практической пользы от топика — 0, вряд ли такой метод будет применяться в реальных проектах. Just for fun, как говорится.
Смотрим что получилось
Под катом код...
<div id="Center"'>
<div id="News"'>
<div class="Column" id="Col1"'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
<span class="Zagl1"'>
</span'>
</div'>
<span class="Col2"'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
2Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution.<br/>
</span'>
</div'>
</div'>


И собственно CSS:

#News {
position : relative;
overflow : hidden;
top : 33%;
}

#News P{
margin : 0px;
}

#Col1 {
width : 260px;
margin-right : 40px;
text-align : justify;
float : left;
}

#Col1 span.Zagl1 {
display : block;
width : 260px;
height : 1000px;
position : absolute;
top : 50%;
background : #f00;
}

#News span.Col2 {
width : 260px;
text-align : justify;
position : absolute;
top : -50%;
left : 50%;
float : left;
}
Tags:
Hubs:
-10
Comments 7
Comments Comments 7

Articles