Html 防止浮动div缠绕 .标题{ 浮动：左； 宽度：50%； 边框：1px纯黑； } 你好 世界

我希望两个内部div彼此并排出现，完美地安装在父对象内部。当它们上没有设置边框时会发生这种情况，但当我设置了边框时，第二个div将换行并显示在下面。我该如何避免这种情况呢？

发生这种情况的原因是50%x2已经是100%。2像素的边框使宽度为100%+4像素。若要撤消此操作，请在两侧使用1px的负边距

演示：

---

你可能会遇到麻烦

从本质上讲，您的div的大小为50%+2像素（每个边框一个）。因为（50%+2像素）*2比100%容器宽，所以它会强制浮动包裹

---

将-1像素的边距应用于.header div的左右两侧应该可以做到这一点。

在需要称为header internal的边框的div内添加一个额外的div

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

.标题{
浮动：左；
宽度：50%；
}
.收割台内部{
填充：10px；
边框：1px实心#ccc；
}
你好
世界

这可能会起作用：

因为您不需要浮动第二个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>