如何使用CSS以干净的方式移动该div？
我正在做一些CSS，我在那里发布了结果： 我想把橙色和灰色的小div向上移动，这样它就在蓝色div的正下方 我知道我可以使用position:absolute并将div移动到任何我想要的地方，但这显然不是最好的方法 我该怎么做 以下是这5个div的CSS代码：如何使用CSS以干净的方式移动该div？,css,html,Css,Html,我正在做一些CSS，我在那里发布了结果： 我想把橙色和灰色的小div向上移动，这样它就在蓝色div的正下方 我知道我可以使用position:absolute并将div移动到任何我想要的地方，但这显然不是最好的方法 我该怎么做 以下是这5个div的CSS代码： #alldivs { width: 700px; margin: 0 auto; position: absolute; padding: 30px; } #green { width
#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;
}
非常感谢不要更改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>
另请参阅。在我的手机上，因此我无法测试此 将浮动右键添加到蓝色、灰色和橙色。清除右边的灰色和橙色。左漂绿色和红色。左边没有红色 更新 好的，给你。此标记将允许您灵活地使用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>
* {
保证金：0；
填充：0；
}
.包装纸{
保证金：0自动；
宽度：700px；
}
上校1{
浮动：左；
宽度：400px；
}
上校2{
浮动：对；
宽度：300px；
}
格林先生{
高度：350px；
背景：绿色；
}
瑞德先生{
高度：200px；
背景：红色；
}
蓝先生{
高度：250px；
背景：蓝色；
}
.橙色{
高度：100px；
背景：橙色；
}
格雷先生{
高度：200px；
背景：灰色；
}