防止浮动div包装
防止浮动div包装
提问于 2010-10-21 20:12:34
<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会自动换行并显示在下面。我该如何避免这种情况？
回答 4
Stack Overflow用户
回答已采纳
发布于 2010-10-21 20:15:07
发生这种情况的原因是因为50% x 2已经是100%了。2像素边框使宽度为100% +4像素。要撤消此操作，请在两侧使用1px的负边距。
演示：http://jsfiddle.net/rfSMX/1/
你可能会碰到100% combined width issue in IE。
Stack Overflow用户
发布于 2010-10-21 20:17:28
实际上，你的div的大小是50% +2像素(每个边框一个)。因为(50% +2像素)*2比你的100%容器宽，所以它强制浮点数换行。
将-1像素边距应用到.header div的左侧和右侧应该可以做到这一点。
Stack Overflow用户
发布于 2010-10-21 20:20:45
在div中添加一个额外的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3987267
复制相关文章
相似问题
腾讯云开发者
