Html 如何使用CSS使2个浮动div始终基于内容匹配其高度？

我有两个带JS动态内容的浮动div。我需要让他们始终匹配彼此的身高-完美地填补100%的父母的身高。如何做到这一点？我知道它可能会被标记为重复，但我无法将任何解决方案与我目前的情况相适应（从大量的结果来看）

.parent{
背景色：红色；
宽度：60%；
浮动：左；
边缘底部：10px；
}
.左{
浮动：左；
宽度：50%；
背景颜色：绿色；
身高：100%；
}
.对{
浮动：左；
宽度：50%；
背景颜色：紫色；
身高：100%；
}

一些

内容

更多

内容

一些

内容

更多

内容

一些

内容

更多

内容


其他一些内容

但行数较少

还需要扩展此功能

以匹配左div的高度
其他一些内容

但行数较少

还需要扩展此功能

以匹配左div的高度
一些

内容

更多

内容

一些

内容

更多

内容

一些

内容

更多

内容

使用flexbox而不是浮点数

.parent{
背景色：红色；
宽度：60%；
填充：1%；
边缘底部：10px；
显示器：flex；
}
.左{
宽度：50%；
背景颜色：绿色；
}
.对{
宽度：50%；
背景颜色：紫色；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责

知识是一种美德，是一种美德，是一种美德，是一种美德

您可以使用这个jQuery插件，而不是浮动和指定子div的高度使用

display:flex，这是CSS3规则。小心，旧浏览器不支持它


.parent{
背景色：红色；
宽度：60%；
显示器：flex；
边缘底部：10px；
}
.左{
宽度：50%；
背景颜色：绿色；
}
.对{
宽度：50%；
背景颜色：紫色；
}

一些

内容

更多

内容

一些

内容

更多

内容

一些

内容

更多

内容


其他一些内容

但行数较少

还需要扩展此功能

以匹配左div的高度
其他一些内容

但行数较少

还需要扩展此功能

以匹配左div的高度
一些

内容

更多

内容

一些

内容

更多

内容

一些

内容

更多

内容


可能重复您可能希望使用Flexbox而不是浮动。请看一看。flexbox并非到处都受支持