为什么2个内联块div的组合宽度等于父级的并排?

时间:2017-09-20 03:38:21

标签: css width

我无法解决这个问题。

我可以通过浮动来实现它,但我想了解为什么会发生这种情况。

pen

代码:



.container {
  width: 1000px;
  height: 400px;
  background-color: purple;
  position: relative;
}

.item {
  height: 100px;
  display: inline-block;
}

.item.left {
  width: 70%;
  background-color: green;
}

.item.right {
  width: 30%;
  background-color: orange;
}

<div class="container">
  <div class="item left"></div>
  <div class="item right"></div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

如果您认为为什么不要它们并排放置,那是因为内联元素对代码中的空白区域很敏感。删除div之间的空格,它们并排排列在同一条线上:

&#13;
&#13;
.container {
  width: 1000px;
  height: 400px;
  background-color: purple;
  position: relative;
}

.item {
  height: 100px;
  display: inline-block;
}

.item.left {
  width: 70%;
  background-color: green;
}

.item.right {
  width: 30%;
  background-color: orange;
}
&#13;
<div class="container">
  <div class="item left"></div><div class="item right"></div>
</div>
&#13;
&#13;
&#13;