Question

我有一个包装器。在那个包装里面我有3个div。我希望#contentOne站在#contentTwo上面，contentThree站在这两者的右侧。我相信有人可以提供帮助。提前感谢您的回复。干杯。渣。（这个定位的东西正在杀了我....）

我的HTML：

<div id="wrapper">
    <div id="contentOne" class="content">contentOne</div>
    <div id="contentTwo" class="content">contentTwo</div>
    <div id="contentThree" class="content">contentThree</div>
</div>

我的CSS：

#wrapper{
    width:430px;
    float:left;
    height:auto;
    border:2px solid blue;}

.content{
    border:1px solid black;
    background-color:yellow;
    width:200px;
    height:100px;}

#contentThree{
    height:130px;}

Answer 1

你能把它们放在浮动的包装纸上吗？

<div id="wrapper">
    <div id="column1" class="column">
        <div id="contentOne" class="content">contentOne</div>
        <div id="contentTwo" class="content">contentTwo</div>
    </div>
    <div id="column2" class="column">
        <div id="contentThree" class="content">contentThree</div>
    </div>
</div>

CSS：

.column {
   float: left;
}

http://jsfiddle.net/xbcxs/

Answer 2

我就是这样做的。请注意包装器position:relative上的div和第三个position:absolute; right:0;上的div。

http://jsfiddle.net/remibreton/7javg/

Answer 3

HTML缺乏提供垂直定位功能。使用较新的显示值，它们会越来越好，但您需要将受众限制为仅限现代浏览器。除非您需要更改HTML的顺序以获得所需的垂直位置。在这种情况下，如果你把第3部分放在顶部并给它一个浮动：你得到你想要的东西。

http://jsfiddle.net/Qmrpu/1/

Answer 4

为什么不使用表格进行布局？

http://jsfiddle.net/Qmrpu/3/

Answer 5

试试这个：

<div id="wrapper">
    <div id="contentThree" class="content">contentThree</div>
    <div id="contentOne" class="content">contentOne</div>
    <div id="contentTwo" class="content">contentTwo</div>
</div>


#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}

.content{
    border:1px solid black;
    background-color:yellow;
    width:200px;
    height:100px;}

#contentThree{
    height:130px;
    float: right;
}

CSS - div定位问题

5 个答案: