2-कॉलम ऑटो-लेआउट सीएसएस द्वारा?

Question

को देखते हुए एक

<div> 
Lorem ipsum dolor sit amet, consectetur adipiscing... 
</div> 

स्वचालित रूप से एक 2 या 3 कॉलम लेआउट उत्पन्न करने के लिए सीएसएस के साथ यह संभव है, कंटेनर की ऊंचाई निर्दिष्ट करके कहते हैं? यदि नहीं, ऐसे मामले में सर्वोत्तम प्रथाएं क्या हैं?

आपकी मदद के लिए धन्यवाद।

Answer 1

मेरे पिछले उत्तर पर टिप्पणियों को देखते हुए, ऐसा लगता है कि मैंने जो भी खोजा था उसे गलत समझा होगा।

आप पाठ स्वचालित रूप से एक स्तंभ से दूसरे में प्रदर्शित करना चाहते हों, तो आपके विकल्प हैं:

• CSS 3 Multi-columns (खराब समर्थित)
• जावास्क्रिप्ट (दिलचस्प पुनर्प्रवाहित मुद्दों)

व्यक्तिगत रूप से, मैं इससे बचेंगे। आम तौर पर, एक कॉलम से अगले तक बहती सामग्री काफी स्क्रीन-मीडिया-असभ्य है।

Answer 2

Floatutorial website में सर्वोत्तम अभ्यास का अच्छा उदाहरण है।

Answer 3

आप सबसे निश्चित रूप से एक 2 या 3 कॉलम लेआउट में ऊपर यदि आप एक कंटेनर और 3 divs, एक 3 कॉलम लेआउट बनाने के लिए इस रूप में सरल किया जाएगा था चालू नहीं कर सके, हालांकि:

<div class="container"> 

    <div class="col1">Column1</div> 
    <div class="col2">Column2</div> 
    <div class="col3">Column3</div> 

</div> 

और सीएसएस:

.container{overflow:hidden; padding:20px; border:1px solid #ccc;} 
.col1, .col2, .col3{width:200px;float:left;clear:none;margin:0 10px 0 10px;} 

यह प्रत्येक पक्ष पर मार्जिन का 10px होने प्रत्येक स्तंभ के साथ एक बहुत ही बुनियादी 3 कॉलम लेआउट पैदा करेगा। कंटेनर div में 20px पैडिंग और सूक्ष्म सीमा है।

आशा है कि यह आपको सही दिशा में इंगित करे।

Answer 4

बात मैं एक ग्रिड प्रणाली का उपयोग करते हुए देखेंगे के इस प्रकार के लिए इस तरह के रूप 960 या YUI

दोनों स्तंभों में उपखंड विभाजित करने के लिए तरीके शामिल हैं।

Answer 5

तुम हमेशा jQuery दृष्टिकोण ले जा सकते हैं, इस लेख को देखो: http://www.mainelydesign.com/blog/view/auto-columns-columnizer-my-new-favorite-jquery-plugin