Question

可能重复：
How to fit a div’s height to wrap around its floated children

我想在<ul>内置<div>，其中有一堆浮动的<li>。唯一的问题是包含<div>折叠为0px高。如何使<div>保持其高度，就像它包含<li>？

一样

HTML：

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
</div>

CSS：

div {
background: rgb(90, 90, 90);
}

ul {
color: red;
}

li {
float: left;
clear: none;
margin-right: 10px;
}

如果使用花车是老式的，你知道更好的风格，请告诉我！

Answer 1

选项1（推荐）：提供将更正其高度的div样式overflow:hidden;。

选项2：或者在当前div的末尾添加更清晰的div

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
   <div style="clear:both;"> </div>
</div>

<强> jsFiddle Demo

编辑：为了澄清，上述两个都具有完整的跨浏览器支持，并且不需要黑客或无效的CSS。

Answer 2

尝试Display:inline-block;

li {
display:inline-block;
    margin-right: 10px;
}

的 Demo 的

的 Cross Browser Inline-Block 的

Answer 3

要解决您的确切问题：

div {
    background: rgb(90, 90, 90);
    overflow: auto;
}

可能不那么“老式”的方法：

div {
    background: rgb(90, 90, 90);
}
ul {
    color: red;
}
li {
    display: inline-block;
    *vertical-align : auto;
    *display: inline; // targets IE7 and such, same effect
    margin-right: 10px;
}

您需要在li元素上调整margin-right以匹配您的确切规格。使用浮点数仍然很酷，但为什么在显示时会烦恼：内联块将解决你想要的大部分问题???

PS：有时IE浏览器没问题 - 我建议使用像Sass这样的预处理器和Compass这样的库来帮助你管理它们。

关于这个问题的几篇文章：

Answer 4

每当您使用FLOAT属性时，请不要忘记添加clear属性

你可以试试这个

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
      <li style="clear:both;float:none"></li>    <!-- Added Clear, removed float -->       
   </ul>
</div>

有一个`<div>`保持其高度与浮动的孩子</div>

4 个答案: