项目最大高度取决于最大内容项。

Question

我有一组带有新闻的项目，我希望每个项目的高度与最大内容项目的高度相同。我想把我的固定高度改为动态。

.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;
`}

Answer 1

您还可以使用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>

​

Answer 2

您可以通过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>

​