html - 水平分布/对齐

Question

在这个 jsfiddle http://jsfiddle.net/byronyasgur/kUgBA/3/我试图让右边的红色与黄色完美匹配，但是我对为什么内部框需要 338px 宽，或者那个数字与什么有关感到困惑。如果我做得更少，第三个框会弹出到下一行。

有四个框表示此设计中可以有任意数量的框。

HTML

<div id="outer">
    <div id="container" >
        <div class="content">content</div>
        <div class="content">content</div>
        <div class="content">content</div>
        <div class="content">content</div>
    </div>
</div>

CSS

#outer{
    width:330px;
    margin: 0 auto;
    padding: 0;
    background: yellow; 
}

#container{
    /* background: orange; */
    padding: 0;
    margin-left: -5px;
    margin-right: -5px; 

    width:338px;
}
.content {
    width: 100px;
    background: red;
    margin: 5px;
    display: inline-block;
    height: 40px;
}

Answer 1

这是内联元素的标准行为。当没有剩余空间时，他们换行。就像 div 中的文本一样，如果它不适合一行，它会继续下一行...