我有几个列表元素,在那里我有两个div左侧浮动。我希望当sencond div获得更多内容时div留给它自动获得相同的高度。
我有两个不同的bg颜色的div,所以当1的内容少于另一个时,div会变高,而bg不会与horizontaly匹配。
Maby你可以快速浏览一下网站,然后你就知道我的意思了, http://newsbreak.vazcreations.nl(顶部中间容器是问题)。
提前致谢
答案 0 :(得分:2)
这个问题可以在没有javascript的情况下合理轻松地解决。如果不是所有用户都启用了javascript,建议您不要使用javascript来实现某些功能。
用于解决问题的技术,不使用javascript,称为Faux Columns(本文更进一步,使用图像,但您不需要。
基本上你把div放在右边的里面左边的div。将左div的宽度设置为两个div的理想总宽度,然后将右div浮动到右侧。您可能需要在左侧div中应用clearfix,以便正确包裹第二个div。
编辑:我刚刚遇到an article,提出了一些其他似乎值得研究的解决方案。
答案 1 :(得分:1)
我认为这样的事情应该有效:
编辑:这可能是更好的解决方案
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
}
#layout {
display:table-row;
}
#left-sidebar, #right-sidebar, #content {
text-align:left;
display:table-cell;
}
</style>
<div id="container">
<div id="layout">
<div id="left-sidebar">
<!-- left sidebar-->
</div>
<div id="content">
<!-- content -->
</div>
<div id="right-sidebar">
<!-- right sidebar -->
</div>
</div>
</div>
请参阅此jsFiddle进行演示:http://jsfiddle.net/Qhk7R/
答案 2 :(得分:0)
你可以通过更改它来伪造它:
.recent-item {
height: 50px;
list-style: none;
float: left;
}
到
.recent-item {
height: 50px;
list-style: none;
float: left;
background-color: #CDCDCD;
margin-top: 5px;
}
并删除.main-date和.recent-bericht的上边距
答案 3 :(得分:-1)
使用jQuery:
var div_1_height = $('.div-1').height();
$('.div-2).height(div_1_height);