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

水平分布/对齐

2 个答案: