跨度增加高度[重复]答案

【问题标题】：Increasing height in span [duplicate]跨度增加高度[重复]
【发布时间】：2018-05-25 05:30:55
【问题描述】：

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

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

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

f F f

【问题讨论】：

让你的 aaa 灵活，从 bbb 中移除浮动

标签： html css flexbox

【解决方案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>

【讨论】：

谢谢，解决了！ - 会在允许时标记你的答案。