如何将div放在另一个div到绝对位置? [英] How to place div inside another div to absolute position?
本文介绍了如何将div放在另一个div到绝对位置?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
例如,我想创建一个如下图所示的模板。
For instance, I would like to create a template like in the image below.
如何将容器内的每个div放置到其绝对位置?我喜欢,而不需要使用float属性。
How do you position each div inside the container to its absolute position? I would prefer without needing to use float-attributes. Any short examples would be appreciated.
推荐答案
您可以使用 absolute
相对
定位。
例如
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 you can adjust the actual positioning to you preference, by changing the top/left/right/bottom values)
这篇关于如何将div放在另一个div到绝对位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文