<分区>
<分区>
我正在处理一个使用 Bootstrap 的页面，并使用它来定义此 Codepen 笔上的列:https://codepen.io/smifaye/pen/GmeQrV
但是我似乎无法弄清楚的一件事是如何保持盒子的高度一致。我已经为这些盒子设置了一个最小高度值，但我的脑子里一片空白，不知道如何让所有的 div 一次调整大小。
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
min-height: 250px;
}
此外，我希望按钮保留在 div 的底部，但也无法弄清楚:(
如有任何帮助，我们将不胜感激。
(右侧的菜单区域是网站设计的一部分，无法更改)
最佳答案
使用 Flexbox 你可以在 div 中设置相等的高度
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
//min-height: 250px;
height: 100%;
}
.button {
min-height: 36px;
height: auto;
width: auto;
padding: 0 36px 0 36px;
border: 2px solid #00019F;
font-size: 1em;
color: #FFFFFF;
background-color: #00019F;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #2D389C;
cursor: pointer;
}
.button:focus {
border: 2px solid #FF9900;
outline: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row " style="margin: 0px;">
<div class="col-md-4">
Menu area that can't be removed
</div>
<div class="col-md-8">
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
<p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
<p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
<p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/property"> <button class="button">Find, report, order</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class=" recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
<p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
<ul>
<li>Dumped rubbish</li>
<li>Dog fouling</li>
<li>Graffiti</li>
<li>Other</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/street"> <button class="button">Report</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
<ul style="padding-top: 10px;">
<li>Frequently asked questions</li>
<li>Communal collections</li>
<li>Large household item collections</li>
<li>More</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/"> <button class="button">View</button> </form>
</div>
</div>
</div> </div>
</div>关于html - 如何让所有div在一行中保持相同的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44178577/