Question

看看这张图片......

Image A

所有方框都是div。我怎么能这样定位他们？这是我到目前为止所得到的......

#container{
    position:relative;
    padding:25px;
}

#div1 {
    float:left;
    margin-left: 50px;
    margin-top: 50px;
    width: 300px;
    padding:25px;
}

#div2 {
    clear:both;
    margin-left: 50px;
    width: 300px;
    padding:25px;
}

#div3 {
    float:right;
    margin-right: 50px;
    margin-top: -100px;
    width: 300px;
    padding:25px;
}

使用上面的代码..div1和div2以某种方式正确定位。但div3位于页面的下半部分。

Answer 1

我会float:right div3并在你的HTML中首先使用它然后只让div1和div2浮动。

像这样：http://jsfiddle.net/eErVT/

Answer 2

...或者你可以将div1和div2包装在它自己的包中，然后浮动它。

Answer 3

将左侧div包裹在一列中。所以你的标记看起来像这样：

<div id="container">
  <div id="main">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
  </div>
  <div id="div3">div3</div>
</div>

然后你的css看起来像这样：

#container{
    position:relative;
    padding:25px;
}
#main {
    float:left;
    width:100px;
}
#div1 {
    padding:25px;
}
#div2 {
    padding:25px;
}
#div3 {
    float:right;
    width: 100px;
    padding:25px;
}

这是一个摆弄的例子：http://jsfiddle.net/neilheinrich/ez2rQ/

Answer 4

不需要添加额外div的替代方法是在div3上使用绝对定位，并在container上使用额外填充为div3创建空间。

请参阅此处的小提琴：http://jsfiddle.net/y2fJS/

CSS：

div {
    border: 1px solid blue;
}
#container{
    position:relative;
    border-color: green;
    padding: 50px 200px 50px 50px; /* right padding (150) should include div3 width+padding+margin */
}

#div1 {
    padding:25px;
}

#div2 {
    padding:25px;
}

#div3 {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 50px;
    padding:25px;
}

编辑：我忘了提到的一个问题是，绝对定位的div3将不再对外部div的高度做出贡献。所以，如果你有一个很长的div3，如果没有一些额外的诡计，这可能行不通。

Answer 5

此处看起来像是您的图片，但我建议您查看网站设计http://www.cssplay.co.uk/等网站。

<html>
    <head>
        <title>Div Positioning</title>
        <style type='text/css'>

            #div1
            {
                position: absolute;
                top: 25px;
                left: 25px;
                height: 200px;
                width: 200px;
                border: 1px solid red;
            }

            #div2
            {
                position: absolute;
                top: 250px;
                left: 25px;
                height: 200px;
                width: 200px;
                border: 1px solid red;
            }

            #div3
            {
                position: absolute;
                top: 25px;
                left: 250px;
                height: 425px;
                width: 300px;
                border: 1px solid red;
            }

        </style>
    </head>
    <body>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
    </body>
</html>

Div定位帮助css

5 个答案: