Html 我怎样才能得到一个和正确的一样高的div呢

我有两个列表元素，其中有两个div在左边浮动。我希望当第二个div获得更多内容时，留给它的div自动获得相同的高度

我有一个不同的背景颜色的两个div，所以当1的内容比另一个少时，div会变高，背景不会水平匹配

也许你可以快速浏览一下网站，然后你就完全明白我的意思了， （问题出在中上部容器上）

提前感谢

使用jQuery：

var div_1_height = $('.div-1').height();
$('.div-2).height(div_1_height);

---

我认为这样做应该奏效：

编辑：这可能是一个更好的解决方案

<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>

#容器{
显示：表格；
边界塌陷：塌陷；
}         
#布局{
显示：表格行；
}           
#左侧边栏，#右侧边栏，#内容{
文本对齐：左对齐；
显示：表格单元格；
}           

---

查看此JSFIDLE以获得演示：

这个问题可以在没有javascript的情况下很容易地解决。如果可以避免的话，建议不要使用javascript来实现某些功能，因为并非所有用户都启用了javascript

在不使用javascript的情况下，用于解决问题的技术被称为（本文更进一步，使用图像，但您不需要）

基本上，您将div放置在右侧左侧div的内部中。将左侧div的宽度设置为两个div的理想总宽度，然后将右侧div向右浮动。您可能需要对左侧div应用a，以便正确环绕第二个div

---

编辑：我刚刚发现了一些其他的解决方案，这些方案似乎值得研究。

您可以通过更改以下内容来假装：

.recent-item {
    height: 50px;
    list-style: none;
    float: left;
}

到

---

删除.main date和.recent bericht

Javascript的最高页边空白应该是最后的选择；可以使用一系列解决方案来解决这个问题，而不是使用Javascript。好的，我想你的解决方案是最好的，谢谢。但我不知道是我还是它不起作用。你遇到了什么问题让它工作起来？我是clearfix的新手，所以不知道它是如何工作的。然后我应该重写我的代码还是继续使用Current？我现在使用li作为父元素。这演示了您需要对HTML和CSS进行的更改：关于clearfix，它是为了克服父元素的子元素是f时出现的问题loated，因此父元素“崩溃”。阅读float的行为以及为什么需要clearfixes很重要，但现在请尝试添加“overflow:hidden对于类的css属性：main-date-background.ok，谢谢你，伙计，我现在将在我的设计中尝试这个方法。只要找出如何在我的编码中使用它。

.recent-item {
    height: 50px;
    list-style: none;
    float: left;
    background-color: #CDCDCD;
    margin-top: 5px;
}