在下面的代码中,左边的两个div都有不同的高度(不固定)。有没有办法在没有使用CSS table
属性或javascript的情况下,使用较高的高度等于div的高度而不使用CSS <div class="wrap">
<div class="left">less content</div>
<div class="right">more content</div>
</div>
属性或javascript?
PS。没有理由不使用表属性,我只想知道是否有任何替代方法。
.wrap{
overflow: hidden;
background: green;
width: 100px;
margin: 30px 100px;
}
.left{
background: yellow;
width: 50px;
float:left;
overflow: hidden;
}
.right{
background: brown;
width: 50px;
float:left;
overflow: hidden;
}
CSS:
{{1}}
的jsfiddle: http://jsfiddle.net/Vv2Ue/
答案 0 :(得分:2)
我今天刚刚解决了这个问题。检查以下资源:http://www.vanseodesign.com/css/equal-height-columns/
我喜欢上一个建议,它基本上会产生同等高度的错觉。
<强> HTML 强>
<div id="container-outer">
<div id="container-inner">
<div id="sidebar">
<p>Sidebar</p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>
</div>
<强> CSS 强>
#container-outer {
float:left;
overflow: hidden;
background: #eee;
}
#container-inner {
float:left;
background: #555;
position: relative;
right:75%;
}
#sidebar {
float: left;
width: 25%;
position: relative;
left: 75%;
}
#content {
float: left;
width: 75%;
position: relative;
left: 75%
}