शुद्ध CSS में दो-कॉलम टेक्स्ट लेआउट

यह पोस्ट मेरे पिछले विषय से प्रेरित थी, जिसमें अखंड पाठ को जेएस का उपयोग करके दो कॉलम में विभाजित किया गया था। "जेएस और मूर्ख के साथ एक वाक्यांश, यदि केवल शुद्ध सीएसएस में," टिप्पणी में लग रहा था।

एल्गोरिथ्म को बदला नहीं गया है, सार समान रहता है। विषय का व्यावहारिक लाभ 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;

}