为什么两个边界框的50％div不并排？

Question

我知道许多用于并排放置div的技术。但是我从来不明白为什么要采用两个宽度的边框框div：50％不会产生并排的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

Answer 1

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

• 块（例如：div，p，h1-h6..etc）
• 内联（例如：span..etc）

块级元素一个接一个地出现，或者您可以称其为彼此堆叠，

而，

内联元素在同一行上创建，除非它们在遇到标签时被专门设置为display: block OR<br />。

解：

1. 您可以使用该物业 display:inline-block

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

2. 使用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>