CSS 容器 DIv 高度。 float DIV问题

你能强制一个容器 DIV 高度来容纳两个 float 的 div child 吗？有什么花哨的技巧可以用来做到这一点吗？我正在尝试在父 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;
}

最佳答案

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

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

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

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

由于您没有发布标记和内容，也没有发布您正在测试的浏览器，因此我无法确切说明为什么 div 被取消了。有两种可能的可能性。

您正在使用 IE，它允许表扩展到其父 div 之外，这将导致损坏。尝试将表格宽度显式设置为其父级的百分比或类似的值。

49％的宽度+填充=大于[parent-width]-[left-div-width]。这将导致它被撞倒，因为左 div 和右 div 对于父宽度来说太宽了。

关于CSS 容器 DIv 高度。 float DIV问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1294784/