如何在div中相对定位div?

时间:2012-03-26 17:46:16

标签: html css

我想将div放在左下角的div中,如:

enter image description here

我想将div放在中心的div中,如:

enter image description here

如何以最简单的方式完成? :o

8 个答案:

答案 0 :(得分:2)

顶部/右侧内部元素: http://jsfiddle.net/ZAKAz/1/

.outer { height:200px; width:200px; position:relative; }

.inner { position:absolute; top:0; right:0; width:50px; height:50px }

集中内部元素: http://jsfiddle.net/ZAKAz/

.outer { height:200px; width:200px; position:relative; }

.inner { position:absolute; top:50%; left:50%;
         margin: -25px 0 0 -25px; width:50px; height:50px }

答案 1 :(得分:1)

HTML:

<div class="outside">
    <div class="inside top_right">
    </div>        
</div>
<div class="outside">
    <div class="inside center">
    </div>
</div>​

的CSS:

.outside {position:relative;width:200px;height:200px;border:2px solid black}
.inside {position:absolute;width:50px;height:50px;border:2px solid blue}

.top_right {top:0;right:0;}

.center {top:50%;left:50%;margin:-25px 0 0 -25px}

容器有一个position:relative来显示页面上的显示位置,并允许position:absolute在容器边界内按预期工作。

中心css将div放在top&amp;的50%处。 left,然后使用margins width height的{​​{1}} / div的负{{1}}将其拉入中心。

我认为右上角几乎是不言自明的。

演示:http://jsfiddle.net/JKirchartz/BK7qr/

答案 2 :(得分:0)

使用Div框

为主div

位置:绝对

其余的div内部使用:

职位:相对

检查http://www.barelyfitz.com/screencast/html-training/css/positioning/点击#4

答案 3 :(得分:0)

您可以尝试我以前的帖子:https://stackoverflow.com/a/9726717/1146022

示例:http://jsfiddle.net/VsqdW/2/

答案 4 :(得分:0)

#div1 {
    position: relative;
    top: 0;
    left: 100%;
}

#div2 {
    width: 100;
    height: 100;
    margin: auto auto;
}

答案 5 :(得分:0)

左上角的

使用:

.ContainingDiv {position: relative;}
.InsideDiv {position: absolute; top: 0px; right: 0px;}

对于中心,请执行下一步:

.InsideDivCenter {margin: 0px auto;}

答案 6 :(得分:0)

尝试浮动属性:

.divA
{
float:right;
} 

http://www.w3schools.com/cssref/pr_class_float.asp

答案 7 :(得分:0)

你的第一个问题很简单:div.foo {float:right; }

或者你可以只是valign = center ...但是上面的答案更加彻底,这就是我首先尝试的方式......至少对于你想要在div中心的那个。

注意:valign已弃用,支持使用css属性vertical-align。所以你必须使用vertical-align。对不起,我忘记了。从桌子铺设的日子开始,我是一所小学校。)