两个内联块元素，每个元素的宽度为50％，不能并排放置在一行中

Question 1

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle：http : //jsfiddle.net/5EcPK/

上面的代码试图将#left div和#right div并排放置在一行中。但是，正如您在上面的JSFiddle URL中所看到的，情况并非如此。

我能够解决将div之一的宽度减小到49％的问题。参见http://jsfiddle.net/mUKSC/。但这不是理想的解决方案，因为两个div之间出现很小的间隙。

我能够解决问题的另一种方法是通过同时浮动两个div。参见http://jsfiddle.net/VptQm/。这很好。

但是我最初的问题仍然存在。为什么当两个div都作为内联块元素保留时，它们却不能并排放置？

Question 2

使用inline-block元素时，whitespace 这些元素之间始终存在问题（该空间大约为4px宽）。

因此，您的两个divs都具有50％的宽度，加上whitespace（〜4px）的宽度大于100％，因此会损坏。您的问题的示例：

显示代码段

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

展开摘要

有几种方法可以解决此问题：

1.这些元素之间没有空格

显示代码段

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

展开摘要

2.使用HTML注释

显示代码段

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

展开摘要

3.将父级设置font-size为0，然后为inline-block元素添加一些值

显示代码段

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

展开摘要

4.在它们之间使用负边距（不理想）

显示代码段

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

展开摘要

5.落角

显示代码段

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

展开摘要

6.跳过某些HTML关闭标记（感谢@thirtydot作为参考）

显示代码段

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

展开摘要

参考文献：

正如@MarcosPérezGude 所说的，最好的方法是使用rem，并font-size在html标签上添加一些默认值（例如HTML5Boilerplate）。例：

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

更新：快到2018年了，请使用flexbox甚至更好的CSS网格布局。

Question 3

css3中的好答案是：

white-space: nowrap;

在父节点中，以及：

white-space: normal;
vertical-align: top;

div（或其他）的50％

范例：http：//jsfiddle.net/YpTMh/19/

编辑：

还有另一种方法：

font-size: 0;

父节点并在子节点中覆盖它

Question 4

这是因为两个div之间的空格被解释为空格。如果<div>按如下所示将标签放入行中，则问题已得到纠正：

<div id="left"></div><div id="right"></div>

Question 5

因为元素之间有空间。如果删除所有空格，它们将适合。

<div id="left">Left</div><div id="right">Right</div>

Question 6

使它们阻塞而不是内联阻塞。这将使div忽略它们之间的空间。

display:block;

或删除标签之间的空间

<div id='left'></div><div id='right'></div>

或添加

margin: -1en;

到div之一以减轻单个渲染空间占用的空间。

Question 7

请检查以下代码：

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

展开摘要

Question 8

Flexbox示例-这将用于包含两个并排元素的父类。

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

取自将div垂直居中放置在另一个div中

Question 9

可以通过将css display：inline添加到保存inline元素的div中来完成。

在使用带有负值的空白消除空白时，有必要将其添加到此特定元素中。将其添加到类中会影响使用该类的地方。

因此，使用display：inline;会更安全。

Question 10

添加浮点数：左；到两个div标签。

div {
  float: left;
}

展开摘要