html - 元素最大高度取决于最大内容元素

标签 html css

我有一组包含新闻的元素,我希望每个元素的高度都与最大内容元素的高度相同。我想将固定高度更改为动态高度。

.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>

关于html - 元素最大高度取决于最大内容元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50346356/

相关文章:

css - 在哪里放置 CSS 在 AngularJS partials 中?

javascript - Jquery UI 与 Bootstrap 3 模式不能很好地配合

html - CSS 动画在 Firefox 中晃动

javascript - 根据用户输入扩展数量 Html 输入宽度?

NavBar 的 CSS 问题

html - 使用自定义背景颜色删除 Font Awesome 图标的边框

javascript - 谷歌地图在页面宽度上更改偏移中心

html - 当内联 block div 由于页面大小调整而改变位置时创建过渡

html - 使用 Bootstrap 4 将版权页脚定位到 Angular/C# 应用程序的底部

javascript - 诊断浏览器差异和问题的工具