Question

我正在设计一个三栏网站，我想在左栏中显示一些特定人物的信息，以及他们的个人资料照片。同时，我正在使用HTML，我已经成功设计了左列的代码。现在我正在尝试在左栏中进行细分，每个部门反映具有姓名和帐户信息的人的照片。

#column_left{
   display: inline;
  float: left;
  margin-left: 5px;
}
 #col1 #sub-div{
  width:100%;
  margin:auto;
  border-top:1px #333 solid;
  border-bottom:1px #333 solid;
}
 #col1 #sub-div #div-img { float:left; display:inline; width: 40px; height: 40px;
   } 
 #col1 #sub-div #div-info { float:left; display:inline; width:auto; height:auto; padding: 2px; }

现在的问题是，即使两个div（div-img和div-info）都在sub-div之下，因此sub-div的高度必须根据其子div的高度而改变。但不幸的是，子div以正确的顺序排列，但父div没有任何高度，除非在＃sub-div的css代码中提及它。

谁能告诉我为什么父母没有继承子元素的高度？我错了吗？

Answer 1

你需要清除浮子。将此行添加到左侧div的底部以查看我的意思：

<div style="clear: both"></div>

要详细了解浮动广告需要清算的原因，请参阅this article。 The answers to this question提供更多清算解决方案。

父div不会自动继承其子元素的高度

1 个答案: