使用浮点数，如何使紫色框在黄色框的下方和蓝色框的右侧对齐？如果我在紫色框上使用“ clear left”，它将在蓝色框的正下方对齐，因此这不是解决方案。可以在下面的链接上看到图像。谢谢！
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Float Demo</title>
<style>
body {
background-color: #FFFFFF;
}
li {
display: inline-block;
}
#box {
width: 200px;
border-style: solid;
border-width: 1px;
border-color: Black;
}
.red {
background-color: red;
float: left;
height: 200px;
}
.green {
background-color: green;
float: left;
height: 200px;
}
.blue {
background-color: blue;
height: 400px;
float: left;
clear: left;
}
.yellow {
background-color: yellow;
float: left;
height: 200px;
}
.purple {
background-color: purple;
float: left;
height: 200px;
}
</style>
</head>
<body>
<div id="box" class=red></div>
<div id="box" class=green></div>
<div id="box" class="blue"></div>
<div id="box" class=yellow></div>
<div id="box" class=purple></div>
</body>
</html>
Click this line to link to the file I'm having trouble with
最佳答案
将黄色和紫色框包装在自己的div中。另外，对框使用类而不是多个ID-多个元素共享相同的ID是错误的形式。
<!DOCTYPE html>
<html>
<head>
<style>
.lv-1 { float: left; }
.box {
width: 200px;
height: 200px;
border: 1px solid black;
}
#red { background-color: red; }
#green { background-color: green; }
#blue {
background-color: blue;
height: 400px;
clear: left;
}
#yellow { background-color: yellow; }
#purple { background-color: purple; }
</style>
</head>
<body>
<div id='red' class='box lv-1'></div>
<div id='green' class='box lv-1'></div>
<div id='blue' class='box lv-1'></div>
<div class='wrap lv-1'>
<div id='yellow' class='box'></div>
<div id='purple' class='box'></div>
</div>
</body>
</html>
jsfiddle：https://jsfiddle.net/jpqq99h9/