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会换行并显示在下面。我该如何避免？

Answer 1

发生这种情况的原因是因为50％x 2已经是100％。 2 px边框使宽度为100％+ 4 px。要撤消此操作，请在任意一侧使用1px的负边距。

演示：http://jsfiddle.net/rfSMX/1/

您可能会遇到100% combined width issue in IE。

Answer 2

基本上，正在发生的事情是你的div的大小为50％+ 2像素（每个边框一个）。因为（50％+ 2像素）* 2比100％容器宽，所以它会强制浮动包裹。

在.header div的左侧和右侧应用-1像素边距应该可以解决问题。

Answer 3

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

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

Answer 4

这可行：

因为你不需要浮动第二个div它应该填满第一个div之后留下的任何空间。这允许您添加边框并仍然将它们并排刷新

防止浮动div包装

4 个答案: