例如,我想创建一个如下图所示的模板。
如何将容器内的每个div定位到其绝对位置?我更喜欢不需要使用float属性。任何简短的例子都将不胜感激。
答案 0 :(得分:33)
您可以使用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/
( ofcourse你可以根据你的偏好调整实际位置,通过改变上/左/右/下值)
答案 1 :(得分:6)
在容器上使用position: relative;
(包含所有内容的<div>
)并绝对定位子元素。容器内的子元素将相对于容器定位,因此根据您的需要放置所有内容非常容易。
然而,在大多数情况下使用定位来放置你的网站被认为是不好的做法..我建议使用浮动,即使你声称不想,你会有更多不同浏览器的一致性。
如果您对花车感到困惑,请阅读this文章