0

div レイアウトがあり、margin-top を持つ div には親への margin-top がありませんが、親には margin-top があります。div class=box_container をその上の div class=container と再び整列させるにはどうすればよいですか?

jsfiddle

HTML

        <div class="right">
        <div class="container">
        </div>
        <div class="box_container">
            <div class="boxwrap">
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
                <div class="box" ></div>    
            </div>
        </div>
    </div>

CSS

.right{
height: 100%;
width: 250px;
background-color: blue;
position:relative;
float: right;
}

.container{
height: 225px;
width: 250px;
background-color: lightsteelblue;
}

.box_container{
height: 140px;
width: 250px;
background-color: darkslategray;
clear: both;
}


.boxwrap{
width: 245px;
height: 50px;
margin-left: 5px;
margin-top:20px;
clear: both;
}

.box{
height: 50px;
width: 50px;
margin-left: 5px;
margin-right: 5px;
float: left;
background-color: red;
}
4

2 に答える 2

1

これは「マージン崩壊」として知られています。ここでの簡単な解決策は、代わりに padding-top を使用することですが、それが適切でない場合は、コンテナーに上部の境界線または上部のパディングを与えることで、コンテナーからマージンがはみ出すのを止めることができます。例えば

.box_container {
    padding-top: 1px;
}
于 2013-05-30T08:54:43.520 に答える
0

paddingの代わりに使用してみてくださいmargin- それはあなたが必要とするものですか? このフィドルを見てください - http://jsfiddle.net/skip405/ALuqW/

于 2013-05-30T08:47:10.747 に答える