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 中的文本一样，如果它不适合一行，它会继续下一行...

Answer 2

您需要那个橙色容器 div 有什么原因吗？我能够将红色与黄色对齐的唯一方法是删除容器 div 并更改外部 div 的宽度。jsFiddle

HTML

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

CSS

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

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

.margin {
    margin: 5px;
}