html - 显示两个相邻的 div，每个 div 的宽度均为 50%

Question

我的 HTML

<div id="wrapper">
    <div id="div1">The two divs are</div>
    <div id="div2">next to each other.</div>
</div>

我的 CSS

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:49%;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:49%;
    height:160px;
    border: 1px solid green;
}

A JSFiddle

因此，当您看到每个 div 的宽度为 49% 时，这是我让它工作的唯一方法。如果将每个的宽度设置为 50%，则 div 将不再彼此相邻显示...这是为什么呢？

Answer 1

因为两件事

1. 边框大小，因此您需要将 box-sizing 更改为 border-box
2. inline-block 元素上的空白

* {
  box-sizing: border-box;
}
#wrapper {
  border: 1px solid blue;
}
#div1 {
  display: inline-block;
  width: 50%;
  height: 120px;
  border: 1px solid red;
}
#div2 {
  display: inline-block;
  width: 50%;
  height: 160px;
  border: 1px solid green;
}

<div id="wrapper">
  <div id="div1">The two divs are</div><div id="div2">next to each other.</div>
</div>