CSS 容器 DIv 高度。浮动 DIV 问题答案

【问题标题】：CSS Container DIv Height. Floating DIV questionsCSS 容器 DIv 高度。浮动 DIV 问题
【发布时间】：2013-10-22 09:19:48
【问题描述】：

您能否强制容器 DIV 高度容纳两个浮动 div 子级？我可以用什么花哨的技巧来做到这一点？我正在尝试在父 div 中制作两个大小相同的 div。我希望它们并排出现，它们之间有一点空白。 Child2 往往会弹出并低于 Child1。注意 Child2 包含一个表。我应该漂浮吗？

HTML：

<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    <table><tr><td>content</td></tr></table>
</div>
</div>

CSS：

div#parent
{
    background-color: #C6E4E0;
    border: solid 3px #017E6F;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    width:99%;
}

div#parent div
{
    width:49%;
    float:right;  
    padding:3px;  
}

div#parent div:first-child
{
    float:left;
}

【问题讨论】：

标签： css html css-float

【解决方案1】：

这不是一个 clearfix 问题，他的问题是他的两个浮动 div 没有并排出现。

首先，你不需要设置父 div 的宽度，div 是块元素，这意味着它们会自动调整宽度以占据其父级的全部宽度（在这种情况下，大概是 div 的父级） #parent 是主体）。

因为您要明确设置宽度并为其提供填充，所以它可能会延伸到身体之外。这并不重要，但是如果您将同样的知识应用到子浮动 div 上，您就会明白为什么正确的 div 可能会被撞到底部。

首先，如果您明确地将 div 的宽度设置为百分比，则不需要添加填充。因为您正在处理百分比宽度，所以最好将填充添加到 div 的内容而不是 div 本身，因为填充是添加到宽度的。因此，如果您将 10px 的内边距添加到 100px 父级中宽度为 49% 的 div，则其宽度将为 49px + 10px + 10px（2 个边），总计算宽度为 69px。

由于您没有发布您的标记和内容或您正在测试的浏览器，我无法确切说明为什么 div 会被撞倒。有两种可能。

您使用的是 IE，它允许表格超出其父 div，这将导致损坏。尝试将表格宽度显式设置为其父级的百分比或类似的值。
49% 的宽度 + 内边距 = 大于 [父宽度] - [左格宽度]。这将导致它向下碰撞，因为左 div 和右 div 对于父宽度来说太宽了。

【讨论】：

【解决方案2】：

我使用 clearfix 类。

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/

.clearfix {
    display: block;
}

/* End hide from IE-mac */

然后在每个浮动元素容器中使用该类。

【讨论】：

【解决方案3】：

#container { width:200px; }
.floated   { width:100px; float:left; }
.clear     { clear:both; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
  <div class="clear"></div>
</div>

【讨论】：

这不是一个清晰/布局问题，他的问题是浮动没有并排出现。

【解决方案4】：

我不是clear: both; 的粉丝，我宁愿在 Jonathan Sampsons 示例中这样做：

#container { width:200px; overflow: hidden; }
.floated   { width:100px; float:left; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
</div>

【讨论】：

实际上这对我有用。避免额外的“clear:both”div，父级得到了正确的高度，包括填充。

【解决方案5】：

顺便说一句，你想要

div#parent > div { float:left; }

而不是

div#parent div:first-child { float:left; }

这仍然不是 IE6 友好的，但它会浮动两个子 DIV。

【讨论】：

其实不是，他想让第一个div向右浮动，第二个div向左浮动，所以first-child是正确的。