如何以干净的方式将CSS移动到CSS上？

-1

http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/419882_389321854411184_131327856877253_1629934_584123648_n.jpg

我想移动的小橙色和灰色div的。这样，它的正下方蓝色的。

我知道我可以使用position：absolute并将div移到我想要的任何位置，但这显然不是最好的方法。

我该怎么做？

这里是为那些5个格的CSS代码：

#alldivs { 
     width: 700px; margin: 0 auto; position: absolute; padding: 30px; 
    } 

    #green { 
     width: 400px; height: 350px; margin: 0px; float: left; background: green; 
    } 

    #blue { width: 300px; height: 250px; margin: 0px; float: right; background: blue; 
      }  

    #red { width: 400px; height: 200px; margin: 0px; float: left; background: red; 
    } 

    #orange { 
     width: 300px; height: 100px; float: right; background:orange; 
    } 

    #grey { 
     width:300px; height:200px; float:right; background:grey; 
    }

非常感谢

来源

2012-03-06 eric01

你能发布你的html吗？ – Colleen 2012-03-06 06:45:11

不要更改CSS，包裹蓝色和橙色DIV;您的html可能是：

<div id="alldivs"> 
    <div id="green"></div> 
    <div> 
     <div id="blue"></div> 
     <div id="orange"></div> 
    </div> 
    <div id="red"></div> 
    <div id="grey"></div> 
</div>

另请参阅this example。

来源

2012-03-06 07:01:40 scessor

嗨scessor，非常感谢您的回复。这正是我所期待的。 Regards – eric01 2012-03-06 14:18:54

在我的手机，所以我不能对此进行测试......

加浮动的权利蓝，灰，橙。并清除灰色和橙色。漂浮着绿色和红色。有红色的清晰离开

UPDATE

好这里亚去。这个标记可以让你灵活地使用你的CSS。

<html> 
<head> 
    <style> 
     * { 
      margin: 0; 
      padding: 0; 
     } 

     .wrapper { 
      margin: 0 auto; 
      width: 700px; 
     } 

     .col_1 { 
      float: left; 
      width: 400px; 
     } 

     .col_2 { 
      float: right; 
      width: 300px; 
     } 

     .green { 
      height: 350px; 
      background: green; 
     } 

     .red { 
      height: 200px; 
      background: red; 
     } 

     .blue { 
      height: 250px; 
      background: blue; 
     } 

     .orange { 
      height: 100px; 
      background: orange; 
     } 

     .grey { 
      height: 200px; 
      background: grey; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="col_1"> 
      <div class="green"></div> 
      <div class="red"></div> 
     </div> 
     <div class="col_2"> 
      <div class="blue"></div> 
      <div class="orange"></div> 
      <div class="grey"></div> 
     </div> 
    </div> 
</body> 
</html>

来源

2012-03-06 07:02:54 jjNford

嗨jjNford，谢谢你的回应。我试过你的方式，但我仍然有同样的问题。用户scessor建议更改html，它工作。我还发现，如果div的大小为green = blue + orange，则只需在html中更改div的顺序。如果尺寸不一致，那么scessor的方式始终有效 – eric01 2012-03-06 14:52:44

@ eric01很好听，就像我说的，我在我的手机上：P哈哈，我只是看着你的链接，看看你在做什么。没有看到通过你的来源看，对不起，正计划更新答案今天帮助你出来，但看起来像问题解决。 – jjNford 2012-03-06 15:19:45

@ eric01更新了答案......效果很好 – jjNford 2012-03-06 15:38:40

如何以干净的方式将CSS移动到CSS上？

回答

相关问题