0

http://jsfiddle.net/MqPDH/10/

.wp-list margin: 10px 1 回目のラップと.a .b使用が機能しないのはなぜmargin: 10pxですか?

.wp{
    background-color: blue;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 450px;
}
.wp_list{
    background-color: red;
    margin: 10px;
    height: 130px;
    position:relative;
}
.a, .b, .c{
    background-color: gray;
}
.a{
    width: 220px;
    height: 30px;
    margin: 10px;
}
.b{
    width: 220px;
    height: 100px;
    margin: 10px;
}
.c{
    width: 130px;
    height: 130px;
    top:0;
    right:0;
    position:absolute;
}

HTML:

<div class="wp">
    <div class="wp_list">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
    <div class="wp_list">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
    // generate from php
</div>
4

2 に答える 2

1

これは主に、インライン要素として動作しているためです。追加display: inline-block;

.wp_ist{
    display: inline-block;
    background-color: red;
    margin: 10px;
    height: 130px;
    position:relative;
}
于 2013-05-29T23:45:16.320 に答える
1

ブロック レベルの要素では垂直方向の余白が崩れる可能性があります10px。これは、下部に余白が設定された要素があり、上部に余白が設定された要素が続く場合を意味します5px。2 つの間のマージンは ではありませんが15px、2 つのうちの最大のものに折りたたまれます: 10px、またはこの場合、両方が である場合10px、 に折りたたまれます10px。

に追加する必要display: inline-block;があり.a, .b, .cます。これで修正されます。

.a, .b, .c{
    background-color: gray;
    display: inline-block;  
}

jsFiddle

于 2013-05-29T23:47:37.123 に答える