html - 如何用css设置高度和下一节课一样

标签 html css height

<分区>

也许这是一个普遍的问题,但请帮助我。我有一个 CSS 类,我经常在我的 HTML 中使用它,例如

.boxBooking {
  width: 14.28%;
}
<div class="boxBooking">
  ....
</div>

<div class="boxBooking">
  test<br/> test
  <br/>
</div>

<div class="boxBooking">
  a<br/> b
  <br/> c
  <br/> d
  <br/>
</div>

如果我在 CSS 中设置高度属性,那么高度将不会动态地遵循我的 HTML 中的“最高”。

我想,哪个是“最高的”将是其他默认的高度属性,即使其他没有内容。这可能吗?我该怎么做。

最佳答案

你可以为此使用 flex-box。只需在 boxBooking div 周围放置一个包装器 div,并将其设置为显示:flex。然后其中的每个 div - 设置为 flex-gorw: 1 并且它们都将占用相同的空间。

请注意,我只是在它们周围放了一个红色边框,以表明它们的高度都相同。

.boxBooking-wrapper  {
display: flex;
}


.boxBooking{
  width:14.28%;
  flex-grow:1;
  border: solid 1px red;
}
<div class="boxBooking-wrapper">
  <div class="boxBooking">
  </div>

<div class="boxBooking">
  test<br/>
  test<br/>
</div>

  <div class="boxBooking">
    a<br/>
    b<br/>
    c<br/>
    d<br/>
  </div>
</div>

关于html - 如何用css设置高度和下一节课一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53038825/

上一篇:javascript - 在点击事件 html 的新窗口中打开图像

下一篇:css - 是否有 CSS 父级选择器?

相关文章:

Python 处理 HTTP 请求

html - CSS 宽度 100% 无效

html - 我的页面在浏览器中移动/重新定位! (但在 Coda 预览中看起来不错)

ios - 如何根据内容调整 UIStackView 的大小?

css - 相同高度图像和文本

php - 有人可以帮助找出这个 PHP 文件中语句的问题吗?

javascript - 选中 div 而不是其中的文本

jquery - 如果 JQuery Mobile 内容溢出,如何通过滚动保持面板高度固定

html - 固定导航栏不与我网站的某些部分重叠

javascript - 侧边菜单出现——div 不动