Question

我想将div放在左下角的div中，如：

enter image description here

我想将div放在中心的div中，如：

enter image description here

如何以最简单的方式完成？：o

Answer 1

顶部/右侧内部元素： 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 }

Answer 2

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/

Answer 3

使用Div框

为主div

位置：绝对

其余的div内部使用：

职位：相对

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

Answer 4

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

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

Answer 5

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

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

Answer 6

左上角的

使用：

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

对于中心，请执行下一步：

.InsideDivCenter {margin: 0px auto;}

Answer 7

尝试浮动属性：

.divA
{
float:right;
}

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

Answer 8

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

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

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

如何在div中相对定位div？

8 个答案: