2

我正在尝试将一个页面放在一起，该页面的中心有一个由四个方形 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,中删除#bottomright。并添加position: absolute;到.box.

jsfiddle： //jsfiddle.net/G85fM/

更新的 jsfiddle（关于@Neils 评论）：http: //jsfiddle.net/G85fM/1/

于 2013-02-19T21:36:06.547 回答