宽度达到100％的内联块不适合一行

Question

我希望在容器的左侧有一个div，在同一行的容器右侧有一个div。我尝试使用内联块，并且右侧容器的文本对齐。

http://codepen.io/anon/pen/WbbBzE

<div class="container">
  <div class="left">
    I'm on the left
  </div>

  <div class="right-container">
    <div class="right">
      I'm on the right
    </div>
  </div>
</div>



.container {
  font-size: 0;
  width: 100%;  
}

.container > div {
  font-size: 12px;
  border: solid 1px black;
  display: inline-block;
  width: 50%
}

.right-container {
  text-align: right;
}

出于某种原因，即使父容器的font-size：0，并且子容器都是50％，它们也会掉到另一行。设置宽度为49％似乎有效，但我不明白为什么50％不应该呢？有没有更好的方法呢？

Answer 1

宽度也受元素边框的影响。您可以将box-sizing:border-box;添加到这些div中，以使它们并排放置。

＆＃13;

＆＃13;

.container {
  font-size: 0;
  width: 100%;
}
.container > div {
  font-size: 12px;
  border: solid 1px black;
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
}
.right-container {
  text-align: right;
}

＆＃13;

<div class="container">
  <div class="left">I'm on the left</div>
  <div class="right-container">
    <div class="right">I'm on the right</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;