एक div में निहित divs के अंदर लंबवत संरेखित जो

का प्रतिनिधित्व करता है मैंने div trick के लिए केवल हर लंबवत-संरेखण की कोशिश की है जिसे मैं पा सकता हूं और अभी भी परिणाम नहीं प्राप्त कर रहा हूं। यह एक स्थापित उत्तरदायी ढांचे के अंदर है, इसलिए मैंने इसे दिखाने के लिए कुछ इनलाइन सीएसएस पर इसे हटा दिया है।एक div में निहित divs के अंदर लंबवत संरेखित जो

<div class="row uniform"> 
 
    <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;"> 
 
    box 1<br /> 
 
    line 2 
 
    </div> 
 
    <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 2 
 
    </div> 
 
    <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;"> 
 
    box 3 
 
    </div> 
 
    <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 4 
 
    </div> 
 
</div>

आदर्श रूप में बक्से 2,3 और सभी बक्से में बॉक्स 1, और पाठ के रूप में ही ऊंचाई के लिए 4 जाने खड़ी बीच में गठबंधन है।

row.uniform कुछ मार्जिन, पैडिंग और आधार रेखा का एक डिफ़ॉल्ट लंबवत-संरेखण सेट करता है, लेकिन यह यहां कुछ भी प्रभाव नहीं दे रहा है।

स्रोत

2016-10-13 Steve

ध्यान दें कि मैंने आपके को सभी div पर हटा दिया है।

.row { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.row div { 
 
    display: table-cell; 
 
    float: none; 
 
    vertical-align: top; 
 
}

<div class="row uniform"> 
 
    <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;"> 
 
    box 1<br /> 
 
    line 2 
 
    </div> 
 
    <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 2 
 
    </div> 
 
    <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;"> 
 
    box 3 
 
    </div> 
 
    <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 4 
 
    </div> 
 
</div>

ब्राउज़र समर्थन, it is supported on all major browsers के बारे में सोच रहे लोगों के लिए।

स्रोत

2016-10-13 18:05:44 Dinei

धन्यवाद @DineiRockenbach! सही क्रम में जादुई संयोजन चाल था। – Steve

सरल समाधान और अधिक विस्तृत जानकारी के लिए उल्लेख सीएसएस flexbox

आप संरेखित केंद्र के लिए चाहते हैं सामग्री को देखने के लिए इस demo

.row { 
 
    display: flex; 
 
} 
 
.row div{ 
 
    flex: 1 
 
}

<div class="row"> 
 
    <div style="background:#CCC;"> 
 
    box 1<br /> 
 
    line 2 
 
    </div> 
 
    <div style="background:#a43c69;"> 
 
    box 2 
 
    </div> 
 
    <div style="background:#CCC;"> 
 
    box 3 
 
    </div> 
 
    <div style="background:#a43c69;"> 
 
    box 4 
 
    </div> 
 
</div>

स्रोत

2016-10-13 21:31:13 Naresh

एक div में निहित divs के अंदर लंबवत संरेखित जो

उत्तर

संबंधित मुद्दे