1

これらの「ブロック」をいくつかのマージンで積み重ねようとしています。問題は、それらの間に 3 ピクセルのスペースがあると「ブロック」されないことです。それらは互いの上に積み重ねられます (典型的な div タグ)。

<div style="display: inline-block; margin: 3px; vertical-align: middle;">
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
</div>​

うまくいかないのはなぜですか？デモ: http://jsfiddle.net/edgren/Y9gCG/

前もって感謝します。

4

4 に答える 4

3

スタイルシートを使用する必要があります。

それ以外は、inline-blockおよびその他の css ステートメントは子 div にある必要があります。

<div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
</div>​

スタイルシート付き: *

CSS

.child{
    margin: 3px;
    vertical-align: middle;
    display: inline-block;
    background-color: #000000;
    height: 100px;
    width: 100px;
}

HTML

<div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>​
于 2012-12-17T13:05:56.393 に答える
0

親ではなく、内側の div にマージンを適用します。

于 2012-12-17T13:05:21.327 に答える
0

これを行う方法を示すフィドルは次のとおりです。http://jsfiddle.net/Y9gCG/3/

div.container div {
 margin-bottom:3px;
 background-color: #000;
 height: 100px;
 width: 100px;"
}
于 2012-12-17T13:06:53.803 に答える
0

子要素ではなく親要素に margin および inline-block プロパティを追加している場合は、コードを次のように変更します。

<div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
</div>​

そしてそれはうまくいくはずです。

于 2012-12-17T13:06:56.630 に答える