css - 如何将 div 放在另一个 div 内到绝对位置？

Question

例如，我想创建一个如下图所示的模板。

如何将容器内的每个 div 定位到其绝对位置？我宁愿不需要使用浮动属性。任何简短的例子将不胜感激。

Answer 1

你可以使用absolute和relative定位。

例如

html

<div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>

    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>

    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>

css

#container{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid red;
    position:absolute;
    width:20px;
    height:20px;    
}

.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

演示在 http://jsfiddle.net/gaby/MB4Fd/1/

（当然，您可以通过更改顶部/左侧/右侧/底部值来根据自己的喜好调整实际位置）

Answer 2

position: relative;在容器上使用（<div>包含所有内容的）并绝对定位子元素。容器内的子元素将相对于容器定位，因此很容易根据您的需要布置所有内容。

但是，在大多数情况下使用定位来布置您的网站被认为是一种不好的做法。我建议您使用浮动，即使您声称不想这样做，您在不同浏览器之间也会有更多的一致性。

如果您对浮点数感到困惑，请阅读这篇文章