我正在使用 flexbox 网格构建一个列布局,我希望每列的所有子元素的高度都相等。
当前的 HTML:
<div class="row middle-xs center-xs">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 benefitFeatures">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
</div>
我也做了一个jsFiddle为此
正如您在 fiddle 中看到的那样,我希望所有蓝色框的高度相同,甚至 UL 列表的高度也相同,这样所有的起点都相同。
我试过使用 flex grow 但没有成功。任何想法如何使这项工作?
最佳答案
首先,您需要将标题与其他列分开。
我为此添加了一个带有 flex-box 的 div.row-eq-height
。
.box {
width: 200px;
height: 200px;
background-color: blue;
margin: 0 auto;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row-eq-height [class*="col-"] {
border: 1px solid #ddd;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet"/>
<div class="row middle-xs center-xs">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class=" row-eq-height">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 benefitFeatures">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="box"></div>
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
</div>
</div>
工作 fiddle Demo
关于html - Flexbox 网格列 - 等高子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46565576/