Horozontal分布/对齐

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