क्या CSS3 में कॉलम के लिए अलग-अलग चौड़ाई निर्दिष्ट करने का कोई तरीका है?

Question

मैं दो कॉलम लेआउट प्रस्तुत करने के लिए सीएसएस का उपयोग करना चाहता हूं। मार्कअप मैं उपयोग कर रहा हूँ इस

<div style="-webkit-column-count: 2; 
      -webkit-column-rule: 1px solid black; 
      -webkit-column-width: 80px; 
      margin-left:20px;margin-top:20px;"> 
    <div id="picturebox" style="">picture box</div> 
    <div id="nme">name</div> 
</div> 

80px है वहाँ एक रास्ता एक स्तंभ 20px की चौड़ाई और एक स्तंभ की, कहते हैं एक चौड़ाई देने के लिए है?

Answer 1

नहीं, कोई रास्ता नहीं है।

सुविधा ऐसी सामग्री के लिए डिज़ाइन की गई है जो बराबर कॉलम के बीच बहती है।

Answer 2

तकनीकी रूप से इसे multi-column property के साथ ही करना संभव नहीं है, लेकिन 2-कॉलम लेआउट के लिए आप इसे एक पक्ष में नकारात्मक margin सेट करके पूरा कर सकते हैं।

div { 
 
    width: 400px; 
 
    background-color: lightgreen; 
 
} 
 

 
ul { 
 
    -moz-columns: 2 auto; 
 
    -webkit-columns: 2 auto; 
 
    columns: 2 auto; 
 
    -moz-column-gap: 80px; 
 
    -webkit-column-gap: 80px; 
 
    column-gap: 80px; 
 
    margin-right: -80px; 
 
}

<div> 
 
    <ul> 
 
     <li>Lorem Ipsum Lorem Ipsum</li> 
 
     <li>Lorem Ipsum Lorem Ipsum</li> 
 
     <li>Lorem Ipsum Lorem Ipsum</li> 
 
     <li>Lorem Ipsum Lorem Ipsum</li> 
 
     <li>Lorem Ipsum Lorem Ipsum</li> 
 
     <li>Lorem</li> 
 
     <li>Lorem</li> 
 
     <li>Lorem</li> 
 
     <li>Lorem</li> 
 
    </ul> 
 
</div>

See JSFiddle Demo