分区定位帮助CSS [英] Div positioning help css

问题描述

看看这张图片...

所有的框都是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位于页面的下方。

解决方案

我会 float：right div3并首先在你的HTML中，然后只是div1和div2不浮动。

类似这样的： http://jsfiddle.net/eErVT/

Take a look at this image...

All of the boxes are divs. How can I position them like that? Here's what I got so far...

#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;
}

With the code above..div1 and div2 is position properly somehow. But div3 is on the lower part of the page.

解决方案

I would float:right div3 and have it first in your HTML and then just have div1 and div2 not floated.

Something like this: http://jsfiddle.net/eErVT/

这篇关于分区定位帮助CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！