防止浮动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/

您可能会在IE中遇到100%组合宽度问题.