防止浮动div换行

Question

<style>
.header {
    float:left;
    width:50%;
    border:1px solid black;
}
</style>

<div style="width:100%;">
    <div class="header">Hello</div>
    <div class="header">World</div> 
</div>

我希望两个内部div并排显示，并完美地适应父元素。当它们没有边框时，就会发生这种情况，但是当我设置边框时，第二个div会换行并显示在下面。我该如何避免这种情况？

- akula1001

Answer 1

这种情况发生的原因是50% x 2已经是100%了。2像素的边框使宽度变成了100% + 4像素。要撤消这个效果，在两侧使用-1像素的负边距即可。

演示：http://jsfiddle.net/rfSMX/1/ 在IE中可能会遇到100%组合宽度问题。

- meder omuraliev

Answer 2

基本上，发生的情况是您的 div 的大小为 50% + 2 像素（每个边框一个）。由于 (50% + 2 像素) * 2 大于您的 100% 容器，因此它会强制浮动换行。

给您的 .header div 的左右两侧应用 -1 像素的边距就可以解决问题。

- Matthew Vines

Answer 3

在需要边框的 div 中添加一个名为 header-inner 的额外 div。

<style>
.header {
    float:left;
    width:50%;
}
.header-inner {
    padding: 10px;
    border: 1px solid #ccc;
}
</style>

<div style="width:100%;">

    <div class="header"><div class="header-inner">
        Hello
    </div></div>

    <div class="header"><div class="header-inner">
        World
    </div></div>

</div>

- woodscreative

Answer 4

这个可能行：

因为您不需要浮动第二个 div，它应该填充第一个 div 后留下的任何空间。这使您可以添加边框并仍然使它们紧贴在一起。

- Alex