Question

我正在做一些CSS，我在那里发布了结果：

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

我想将小橙色和灰色的div向上移动，使其位于蓝色的下方。

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

我该怎么做？

以下是这5个div的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;
    }

非常感谢

Answer 1

不要改变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。

Answer 2

在我的手机上，所以我无法测试...

将浮动添加到蓝色，灰色和橙色。灰色和橙色清晰。漂浮左绿色和红色。有红色清左

更新

好的，你走了。此标记将允许您灵活使用您的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>

如何以干净的方式使用CSS移动该div？

2 个答案: