Html 为什么不'；两个边框框50%并排分割？

我知道很多并排放置div的技巧。然而，我一直不明白为什么使用两个宽度为50%的边框框div不能生成并排div。从我对css的理解来看，有了边距、填充和边框，这应该绝对有效

正文{
填充：0；
保证金：0；
边界：0；
}
div{
高度：300px；
框大小：边框框；
显示：内联块；
保证金：0；
}
.左{
背景颜色：蓝色；
}
.对{
背景色：红色；
}
.一半{
宽度：50%；
}

两个原因：

• 默认情况下，Div元素是

  display:block

• 元素之间有空间，空间会占用…嗯空间

更改“显示”属性并删除空间

正文{
填充：0；
保证金：0；
边界：0；
}
div{
高度：300px；
框大小：边框框；
保证金：0；
显示：内联块；
}
.左{
背景颜色：蓝色；
}
.对{
背景色：红色；
}
.一半{
宽度：50%；
}

---

首先，您需要了解基于display属性的HTML元素有两种类型-

• 块（例如：分区、p、h1-h6等）
• 内联（例如：span..等）

块级图元显示为一个低于另一个，或者您可以称之为堆叠在另一个之下

鉴于

内联元素在同一行上创建，除非它们被专门设置为

显示：块
或（如果它们遇到

标记）

解决方案：

您可以使用属性
display:inline块

问题：它将添加空格，并将第二个
div
放在下一行，即使
宽度为50%。现在，删除空白的方法，您可以尝试其中任何一种

在两个
div
上使用
float:left


正文{
填充：0；
保证金：0；
}
div{
高度：300px；
}
.左{
背景颜色：蓝色；
}
.对{
背景色：红色；
}
.一半{
宽度：50%；
浮动：左；
}
.半新{
显示：内联块；
宽度：50%
}
使用Float

使用内联块
因为默认情况下
div
元素是
display:block
（即每行/行一个元素）。您需要将它们设置为
float
或
display:inline block
。还请注意，
display:inline块
将在两个块之间添加自己的空格，这两个块必须为空。关于块格式上下文相关：
在块格式上下文中，框是垂直地一个接一个地排列的，从包含块的顶部开始。
@GeorgeMauer:这意味着下一个元素不能在同一行上，除非修改
显示。
。就像给所有建议浮动的人的提示一样。是的，这解决了问题。但看在上帝的份上，现在是2015年，停止使用浮动。我们有flexbox。@哈利，你说得对。我认为这不是重复，因为这个问题没有问为什么，答案只是暗示而不是给出。然而，这是一个判断的召唤。或者他也可以让他们离开，比如说，空间占用…嗯，空间>你能用科学事实来验证这一点吗？@NicoO-你可以编辑这个片段，并在两个元素之间加上空白。@j08691-浮动非常适合，但一旦你开始使用它将两个东西并排放在一起，你就更接近于必须开始清理东西了。在这里有一个完整的处理空间问题的方法列表。请参阅我的编辑。我的意思是把东西排成块。那是打字错误。感谢您突出显示空白，尽管我仍然不明白它来自何处。该链接已断开，但您通过解释换行符隐式创建了一个空白来暗示解决方案。你能把答案编辑成我愿意接受的程度吗？@GeorgeMauer你应该读这篇文章-编辑答案并修复链接。是的，在使用
内联块时，会隐式添加空格。在OP中，两个div位于不同的行上，新行由html为内联元素呈现为单个空白，因此第二个div的可用空间小于50%（100%-50%的空白字符宽度）