我如何得到一个与它一样高的div

时间:2011-11-07 22:06:52

标签: html css

我有几个列表元素,在那里我有两个div左侧浮动。我希望当sencond div获得更多内容时div留给它自动获得相同的高度。

我有两个不同的bg颜色的div,所以当1的内容少于另一个时,div会变高,而bg不会与horizo​​ntaly匹配。

Maby你可以快速浏览一下网站,然后你就知道我的意思了, http://newsbreak.vazcreations.nl(顶部中间容器是问题)。

提前致谢

4 个答案:

答案 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);