CSS容器DIv高度.浮动DIV问题

Question

你能强制容器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;
}

Answer 1

这不是一个明确的问题家伙,他的问题是他的两个浮动div没有并排出现.

首先,你不需要设置父div的宽度的div是块元素,这意味着他们自动调整其宽度以占用其母公司的整个宽度(在这种情况下,DIV#父母想必父身体).

因为您正在明确设置宽度并给它填充,所以它可能会延伸到身体的BEYOND.这并不重要,但是如果你将这些相同的知识应用于孩子浮动的divs,你就会明白为什么正确的人可能会被撞到底部.

首先,如果您明确地将div的宽度设置为百分比,则无需添加填充.因为您正在处理百分比宽度,所以最好将填充添加到div的内容而不是div本身,因为填充是添加到宽度.因此,如果添加10px的填充到一个div在一个100px的父有4​​9%的宽度,就必须49px的宽度+ 10px的+ 10px的(2个边)为69px的总计算的宽度.

由于您没有发布您的标记和内容或您正在测试的浏览器,我无法确切地说为什么div被击倒了.有两种可能性.

1. 您正在使用IE,它允许表超出其父div,这将导致破坏.尝试将表宽度明确设置为其父级的百分比或类似的值.
2. 49%宽度+填充=大于[父宽度] - [左边宽度].这将导致它被撞倒,因为左div和右div对于父宽度而言太宽.

Answer 2

#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>