为什么不是两个边框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

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

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

块级别元素出现在另一个之下，或者您可能称之为堆叠在彼此之下，

而，

内联元素在同一行上创建，除非如果遇到display: block标记，则将其专门设置为<br /> OR 。

<强>

的解决方案：

1. 您可以使用属性display:inline-block

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

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>

Answer 2

有两个原因：

• Div元素默认为display: block
• 元素之间有空间，空间占用空间。

更改显示属性并删除空格。

＆＃13;

＆＃13;

body {
	padding: 0;
	margin: 0;
    border: 0;
}
div {
	height: 300px;
	box-sizing: border-box;
	margin: 0;
    display: inline-block;
}
.left {
	background-color: blue;
}
.right {
	background-color: red;
}
.half {
	width: 50%;
}

＆＃13;

<div class="half left"></div><div class="half right"></div>

＆＃13;

＆＃13;

＆＃13;