2

中央に4つの正方形のdivのグリッドがあるページをまとめようとしています。これが私が持っているものです、あなたは私が何をしようとしていたかを見ることができると思います。ポジショニングを正常に機能させるために、ここで何が欠けていますか？

http://jsfiddle.net/LKfd4/

HTML

<div id='main-container'>
 <div class='box' id='topleft'></div>
 <div class='box' id='topright'></div>
 <div class='box' id='bottomleft'></div>
 <div class='box' id='bottomright'></div>

</div>

CSS

#main-container{
    border:1px solid black;
    width:980px;
    height:700px;
    margin:0 auto;
    position:relative;
    top:20px;
}

.box {
    width:100px;
    height:100px;
    background:gray;
    border:2px solid #696969;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  
}

#topleft{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:-110px;
    margin-left:-110px;
}
#topright{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:-110px;
    margin-left:10px;
}
#bottomleft{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:10px;
    margin-left:10px;
}
#bottomright{
    position:relative;
    margin:0 auto;
    top:50%;
    left:50%;
    margin-top:10px;
    margin-left:-110px;
}
4

1 に答える 1

5

、、、position: relative;から削除します。そしてに追加します。#topleft#topright#bottomleft#bottomrightposition: absolute;.box

jsfiddle： http: //jsfiddle.net/G85fM/

udpated jsfiddle（@Neilsコメントに関して）：http：//jsfiddle.net/G85fM/1/

于 2013-02-19T21:36:06.547 に答える