सीएसएस/फ्लेक्सबॉक्स: स्तंभों जैसे

Question

मैंने अपने ऐप के लिए एक सूची घटक बनाया है, मैं स्टाइल की वजह से टेबल का उपयोग नहीं कर सकता।

मैं "पंक्तियों" के अंदर तत्वों को शीर्ष से नीचे तक कॉलम जैसे समान चौड़ाई रखने के लिए चाहता हूं। कोड इस जैसा दिखता है:

और यह है, जो मैं चाहता:

<div class="row"> 
    <div class"element>iPhone </div> 
    <div class"element>Buy an iPhone now!</div> 
</div> 
<div class="row"> 
    <div class"element>Airport Express </div> 
    <div class"element>Buy an Airport Express now!</div> 
</div> 
<div class="row"> 
    <div class"element>iPad </div> 
    <div class"element>Buy an iPad now!</div> 
</div> 

यह वर्तमान में क्या लगता है कि है

है वहाँ ऐसा करने का एक तरीका?

Answer 1

उपयोग सीएसएस तालिकाओं के साथ लेकिन आप कर सकते हैं:

• कोशिकाओं में साथ border-spacing
• बॉर्डर्स पंक्तियों के बीच अलगाव। आप उन्हें देखने के लिए border-radius का उपयोग कर सकते हैं।
• छद्म-तत्व छद्म-तत्व के कारण कोशिकाओं को कम करने से रोकने के लिए दाएं
• white-space: nowrap पर उपलब्ध स्थान भरने के लिए सेल के रूप में प्रदर्शित किया गया है।

.wrapper { 
 
    display: table; 
 
    border-spacing: 0 10px; 
 
} 
 
.row { 
 
    display: table-row; 
 
    border: 1px solid; 
 
} 
 
.row::after { 
 
    content: ''; 
 
    display: table-cell; 
 
    width: 100%; 
 
    border: 1px #6AACC9; 
 
    border-style: solid none; 
 
} 
 
.element { 
 
    display: table-cell; 
 
    border: 1px solid #6AACC9; 
 
    border-right-color: #adadad; 
 
    border-left-style: none; 
 
    padding: 5px; 
 
    white-space: nowrap; 
 
} 
 
.element:first-child { 
 
    border-left-style: solid; 
 
    border-radius: 5px 0 0 5px; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <div class="element">iPhone </div> 
 
    <div class="element">Buy an iPhone now!</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="element">Airport Express </div> 
 
    <div class="element">Buy an Airport Express now!</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="element">iPad </div> 
 
    <div class="element">Buy an iPad now!</div> 
 
    </div> 
 
</div>

Answer 2

आप फ्लेक्सबॉक्स के साथ ऐसा नहीं कर सकते हैं। उन तत्वों के बीच आयामों को समझा नहीं जा सकता है जो माता-पिता को साझा नहीं करते हैं।

सीएसएस टेबल्स

.row { 
 

 
    display: table-row; 
 

 
} 
 

 
.element { 
 

 
    display: table-cell; 
 

 
    border: 1px solid grey; 
 

 
    padding: 8px; 
 

 
}

<div class="row"> 
 
    <div class="element">iPhone</div> 
 
    <div class="element">Buy an iPhone now!</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element">Airport Express</div> 
 
    <div class="element">Buy an Airport Express now!</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element">iPad</div> 
 
    <div class="element">Buy an iPad now!</div> 
 
</div>