Question

所以这里再次提出一个将divs高度调整为另一个问题的问题。我发现了很多问题和答案，但似乎无法使其发挥作用。因此我再次问这个问题。

问题：我有2个div，他们的高度不同。我想将div X的高度调整到最高（其他）div。我希望在没有javascript的情况下发生这种情况，因为我希望它与调整我的浏览器屏幕大小兼容并且我不想一直使用调整大小功能来检测屏幕大小（希望有意义）。

所以这是我的代码：http://jsfiddle.net/frLt1vmn/

<style>
#container2 {
margin: 10px auto;
width: 927px;
}
#leftCol2{  float: left;
    width: 195px;
    background: #FCF;
    z-index:-1;
    padding:0;
     margin:0;
    }
#rightCol2{float:right;
width:732px;
background: #CFF;
    z-index:1;
    padding:0;
     margin:0;
}
</style>
<div id="container2">
<div id="rightCol2">
How to adjust the divs automatically to the height of the other.
</div>
<div id="leftCol2">
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
</div>
</div>

感谢您的帮助！

修改由于响应能力，我首先调用rightCol2 div。见这里：http://jsfiddle.net/azL9uefv/

Answer 1

请参阅我的小提琴解决方案http://jsfiddle.net/frontDev111/sm6xqqyw/

我在HTML和CSS中做了一些更改。

您需要将display:table用于父容器，将display:table-cell用于子容器。

如果您对此有疑问，请告诉我。

Answer 2

如果你想只用css这样做。您必须将div显示为表格

<强> JS FIDDLE DEMO

<强> HTML

<div id="container2">
<div id="leftCol2">
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
<p>In this example this div is heigher.</p>
</div>
    <div id="rightCol2">
How to adjust the divs automatically to the height of the other.
</div>
</div>

<强> CSS

#container2 {
margin: 10px auto;
width: 927px;
    display: table;
}
#leftCol2{
    width: 195px;
    background: #FCF;
    z-index:-1;
    padding:0;
     margin:0;
    display: table-cell;
    }
#rightCol2{
width:732px;
background: #CFF;
    z-index:1;
    display: table-cell;
    padding:0;
     margin:0;
}

再一次：将div调整到另一个divs高度（动态）？

2 个答案: