Question

我在一些类中定义的3个不同的框中有一个内容（例如box-cls）。风格适用于所有三种相同的风格。因此，我举了一个例子：

+---------+---------+---------+
| 12 34   | my long | ab de   |
+---------+---------+---------+

当我缩小页面时，框的内容也会减少。我原本希望看到这样：

+-------+-------+-------+
| 12 34 | my    | ab de |
|       | long  |       |
+-------+-------+-------+

事实上，我看到班级中的方框缩小了这样：

+-------+-------+-------+
| 12 34 | my    | ab de |
+-------+ long  +-------+
        +-------+

有没有办法动态调整盒子高度到盒子的最大高度？
如果1）不可能：只要箱子的长度低于固定限制，是否可以设定高度？

我尝试了一些@media，但在正确的造型方面没有成功。目前我只有一个固定的解决方案：

.box-content {
    min-height: 46px!important;
    display: flex;
    align-items: center;
    justify-content: center;
 }

但希望有一个更动态的解决方案 - 因为我的方法，在很多情况下高度很大！寻找CSS解决方案 - 而不是JQuery（或类似）

Answer 1

.boxes{
  display: flex;                  /* 1. */
}

.box {
  flex: 1;                        /* 2. */
  border: 1px solid chocolate;
}

<div class="boxes">
  <div class="box">12 34</div>
  <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptate, optio magni hic et non voluptatibus ipsum voluptates, quisquam suscipit consectetur ea eveniet ut eos corporis perspiciatis error temporibus aut.
  </div>
  <div class="box">ab de</div>
</div>

Answer 2

如果您不想使用flex，则可以使用具有更好浏览器支持的table/table-cell。

.wrap {
  display: table;
}
.box-content {
    min-height: 46px!important;
    display: table-cell;
  border: 1px solid red;
 }

<div class="wrap">
  <div class="box-content">12 34</div>
  <div class="box-content">my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long </div>
  <div class="box-content">ab de</div>
</div>

CSS：多个框 - 如果一行太长则换行

2 个答案: