防止浮动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将包装并显示在下方。我如何避免这种情况？

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

在需要叫做header-inner的边框的div中添加一个额外的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> 

Answer 4

这可能工作：

，因为你不需要飘起了第二个div应该填补是第一个div之后留下任何空间。这允许你添加一个边框，并且让它们并排齐平