内联块的宽度相当于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; 
} 

出于某种原因，即使父容器具有字体大小：0，和孩子们都是50％，它们落至其他线路。将宽度设置为49％似乎可行，但我不明白为什么50％的时候不应该这样做？有没有更好的方法来做到这一点？

Answer 1

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

.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; 
 
}

<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>