純粋なCSSの2列テキストレイアウト

この投稿は、JSを使用してモノリシックテキストを2つの列に分割した以前のトピックに触発されました。 「純粋なCSSでのみ、JSと愚か者がそれを行う」というようなフレーズがコメントに聞こえました。

アルゴリズムは変更されず、本質は同じままです。 このトピックの実際的な利点は0です。このような方法が実際のプロジェクトに適用される可能性は低いです。 彼らが言うように、ただの楽しみのために。

何が起こったのか見て

カットコードの下で......

<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;

}