我有一组带有新闻的项目,我希望每个项目的高度与最大内容项目的高度相同。我想将固定高度更改为动态。
.article-3 {
`text-align: center;
vertical-align: middle;
background: #F7F7F7;
max-width: 235px;
height: 335px;
padding: 10px 20px 10px 20px;
margin: 10px 10px 10px 10px;
display: block;
`}
您也可以使用 Display flex
.row {
display: flex;
flex-wrap: wrap;
}
.article-3 {
border: 1px solid coral;
padding: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-xs-12 article-3">
<a href="#" style="text-decoration:none" >
<span>some text</span>
<h4>some text</h4>
</a>
</div>
<div class="col-md-6 col-xs-12 article-3">
<a href="#" style="text-decoration:none" >
<span>
some more text some more text
some more text some more text
some more text some more text
some more text some more text
some more text some more text
</span>
<h4>some more text</h4>
</a>
</div>
</div>
您可以通过grid
技术来实现它,如下所示:
.container {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
}
<section class="container">
<div style="background-color:#F00">
fasdfads fad
</div>
<div style="background-color:#960">
fadsfadsfads<p>fadfdasfds</p>
</div>
<div style="background-color:#0C3">
afadsfads
</div>
</section>