Html 增加跨度中的高度

如何使绿色的

div

与红色的

div

具有相同的可变高度？ 这意味着当绿色文本增长时，红色框的高度也会增长到与绿色框相同的高度。 我知道我可以从

.aaa

中删除

span

，但对于其他代码影响，这不是可行的解决方案<代码>.aaa span必须保留

.aaa span{
显示器：flex；
填充：20px；
字号：1.6em；
}
.bbb{
宽度：50%；
浮动：左；
文本对齐：左对齐；
颜色：黑色；
背景：红色；
}
.ccc{
宽度：30%；
文本对齐：居中；
背景颜色：绿色；
}

喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂
12345

像这样拆分您的第一条CSS规则：

.aaa {
  display: flex;
}

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

flex

属性需要分配给容器，而不是跨度。而

float

是不必要的

.aaa{
显示器：flex；
}
.aaa跨度{
填充：20px；
字号：1.6em；
}
.bbb{
宽度：50%；
文本对齐：左对齐；
颜色：黑色；
背景：红色；
}
.ccc{
宽度：30%；
文本对齐：居中；
背景颜色：绿色；
}

喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂
12345

制作aaa flex，从BBB手链中移除浮动，这就解决了问题！-当它允许我做的时候，我会标记你的答案。