2

我正在设计一个三栏网站，我想在左栏中显示一些特定人员的信息以及他们的个人资料照片。同时，我在 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 代码中提到它。


谁能告诉我为什么父元素没有继承子元素的高度？我在某个地方错了吗？

4

1 回答 1

2

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

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

要了解更多关于为什么浮动需要清除的信息，请参阅这篇文章。这个问题的答案提供了更多清晰的解决方案。

于 2012-04-28T00:03:46.550 回答