<分区>
我知道很多并排定位 div 的技巧。但是，我一直不明白为什么采用两个宽度为 50% 的边框 div 不会产生并排的 div。根据我对 css 的理解，边距、填充和边框不在等式中，这应该 绝对 有效。
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
}<div class="half left"></div>
<div class="half right"></div>我错过了什么？
编辑:
正如许多人指出的那样，display: block 不会给我并排行为。这是一个错误类型。我打算让所有的东西都inline-block
最佳答案
首先你需要了解HTML中基于显示属性的元素有两种类型——
block 级元素一个一个地出现在另一个之下，或者你可以称之为堆叠在另一个之下，
然而，
内联元素在同一行创建除非它们被特别设置为display: block OR 如果他们遇到 <br />标签。
您可以使用属性 display:inline-block
问题: 它将添加空格并放置第二个 div在下一行，即使是 width: 50%; .现在，there are several删除空格的方法，您可以尝试其中的任何一种。
使用 float: left在 div 上的
body {
padding: 0;
margin: 0;
}
div {
height: 300px;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 50%;
float: left;
}
.half-new {
display: inline-block;
width: 50%
}<h1>Using Float</h1>
<div class="half left"></div>
<div class="half right"></div>
<hr />
<h1>Using inline-block</h1>
<div class="half-new left"></div><!--
--><div class="half-new right"></div>关于html - 为什么两个边框框 50% 的 div 不是并排的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32765943/