1

このjsfiddle http://jsfiddle.net/byronyasgur/kUgBA/3/では、右側の赤を黄色と完全に一致させようとしていますが、内側のボックスの幅を338pxにする必要がある理由に混乱しています。またはその図が何に関連しているか。それを少しでも減らすと、3 番目のボックスが次の行に飛び出します。

このデザインにはボックスがいくつあってもよいという事実を表すために、4 つのボックスがあります。

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

2 に答える 2

1

これはインライン要素の標準的な動作です。スペースがなくなると、新しい行に移動します。div 内のテキストと同じように、1 行に収まらない場合は次の行に続きます...

于 2013-05-09T16:52:31.593 に答える
0

オレンジ色のコンテナ div が必要な理由はありますか? 赤と黄色を揃え​​ることができた唯一の方法は、コンテナー div を削除し、外側の div の幅を変更することでした。jsフィドル

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;
}
于 2013-05-09T17:18:43.217 に答える