Question

如何让绿色div与红色div具有相同的变量高度？这意味着当绿色文本增长时，红色框的高度也会变得与绿色框相同。我知道我可以从span删除.aaa，但是对于其他代码影响，这不是可行的解决方案。 .aaa span必须保留。

＆＃13;

.aaa span {
  display: flex;
  padding: 20px;
  font-size: 1.6em;
}

.bbb {
  width: 50%;
  float: left;
  text-align: left;
  color: black;
  background: red;
}

.ccc {
  width: 30%;
  text-align: center;
  background-color: green;
}

＆＃13;

<div class="wrapper">
  <div class="aaa"><span class="bbb">Hello hello hello hello hello Hello hello hello hello hellotitle titletitle titletitle titletitle titletitle titletitle title</span>
    <span class="ccc">12345</span>
  </div>
</div>

＆＃13;

˚F F ˚F

Answer 1

按照以下方式拆分你的第一个CSS规则：

.aaa {
  display: flex;
}

.aaa span {
  padding: 20px;
  font-size: 1.6em;
}

需要将flex属性分配给容器，而不是分配给跨度。并且float不是必需的。

.aaa {
  display: flex;
}

.aaa span {
  padding: 20px;
  font-size: 1.6em;
}

.bbb {
  width: 50%;
  text-align: left;
  color: black;
  background: red;
}

.ccc {
  width: 30%;
  text-align: center;
  background-color: green;
}

<div class="wrapper">
  <div class="aaa"><span class="bbb">Hello hello hello hello hello Hello hello hello hello hellotitle titletitle titletitle titletitle titletitle titletitle title</span>
    <span class="ccc">12345</span>
  </div>
</div>

跨度增加高度

1 个答案: