css 两个框不能分割父宽度的 100%

Question

这是 JS fiddle :http://jsfiddle.net/nettrinity/8YXsQ/

<div class="outer-box">
    <div class="inner-one">30%</div>
    <div class="inner-two">70%</div>
</div>

我想让他们100%分，但总有差距。它是什么？因为我将所有边距、填充和边框设置为 0。这是一个错误吗？

谢谢!

Answer 1

您已将 div 元素设置为 inline-block，这使它们表现得像简单文本。你在他们之间看到的是一个简单的空间。如果您删除它们之间的换行符，并将第二个 div 的宽度设置为 70%，您将得到正确的结果。

http://jsfiddle.net/8YXsQ/9/

<div class="outer-box">
    <div class="inner-one"></div><div class="inner-two"></div>
</div>

无论如何，有一些inline 和inline-block 的替代方案可以将元素彼此相邻放置。尝试对父元素使用 float:left 或 display:table，对子元素使用 display:table-cell 并查看最适合您的需要。