我希望每行有两个divs。第二个div应该始终显示其全部内容。第一个CCD_ 3的高度应始终与来自同一行的第二个div的高度相同。如果第一个div的高度不足以显示其内容，那么它应该是可滚动的。
我使用javascript设置了第一个div的高度，但我想这不是最好的解决方案，因为第一个和第二个div的内容可以更改。所以这个javascript函数会被调用很多次。使用css可以获得这种效果吗？
我的代码是：
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style>
.firstElementClass, .secondElementClass{
float:left;
width: 30%;
text-align: center;
}
.firstElementClass{
background: red;
overflow: auto;
}
.secondElementClass{
background: yellow;
}
.rowClass{
margin-top: 20px;
clear:both;
padding: 20px;
}
</style>
</head>
<body>
<div class="rowClass">
<div class="firstElementClass">11aa<br>11aa<br>11aa<br>11aa<br>11aa<br>11aa</div>
<div class="secondElementClass">11bb<br>11bb<br>11bb<br>11bb</div>
</div>
<div class="rowClass">
<div class="firstElementClass">AA</div>
<div class="secondElementClass">22bb<br>22bb<br></div>
</div>
<div class="rowClass">
<div class="firstElementClass">AA</div>
<div class="secondElementClass">33bb<br>33bb<br>33bb<br>33bb</div>
</div>
<div class="rowClass">
<div class="firstElementClass">AA</div>
<div class="secondElementClass">44bb<br>44bb<br>44bb</div>
</div>
</body>
<script>
$(function(){
$(".firstElementClass").each(function(){
$(this).height($($(this).parent().find(".secondElementClass")[0]).height());
});
});
</script>
</html>您应该在这里使用某种表格布局，而不是float，或者CSS网格或display: table。
这为您提供了所有div都具有相同高度(行中最高div的高度(的行。现在，要通过最后一个div调整所有内容，您可以在第一个div的*contents*上使用position: absolute，这意味着在排列完所有其他布局后，它将占用剩余的空间(注意下面示例中.firstElementClass内的额外.cellValuediv(。
.myTable {
display: table;
border-spacing: 20px;
width: 60%;
}
.rowClass {
display: table-row;
}
.firstElementClass,
.secondElementClass {
display: table-cell;
}
.firstElementClass {
position: relative;
width: 50%;
background: red;
}
.firstElementClass .cellValue {
position: absolute;
top:0;left:0;bottom:0;right:0;
overflow: auto;
}
.secondElementClass {
background: yellow;
}<div class="myTable">
<div class="rowClass">
<div class="firstElementClass">
<div class="cellValue">11aa<br>11aa<br>11aa<br>11aa<br>11aa<br>11aa</div>
</div>
<div class="secondElementClass">
<div class="cellValue">11bb<br>11bb<br>11bb<br>11bb</div>
</div>
</div>
<div class="rowClass">
<div class="firstElementClass">
<div class="cellValue">AA</div>
</div>
<div class="secondElementClass">
<div class="cellValue">22bb<br>22bb<br></div>
</div>
</div>
<div class="rowClass">
<div class="firstElementClass">
<div class="cellValue">AA</div>
</div>
<div class="secondElementClass">
<div class="cellValue">33bb<br>33bb<br>33bb<br>33bb</div>
</div>
</div>
<div class="rowClass">
<div class="firstElementClass">
<div class="cellValue">AA</div>
</div>
<div class="secondElementClass">
<div class="cellValue">44bb<br>44bb<br>44bb</div>
</div>
</div>
</div>使用flexbox，您可以实现两个相同高度的div
.rowClass{
display:flex;
}
.firstEl,.secondEl{
flex:1;}
如果这不是你想要的，请在评论中告诉我。