效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.box {
height: 50px;
width: 500px;
background-color: rgb(208, 219, 220);
}
.box0 {
width: 560px;
height: 80px;
background-color: rgb(228, 199, 228);
overflow: hidden;
/* 不允许跨行 */
white-space: nowrap;
}
.box1 {
width: 200px;
height: 50px;
background-color: rgb(225, 203, 156);
display: inline-block;
/* display: inline; */
/* float: left; */
}
.box2 {
width: 200px;
height: 50px;
background-color: rgb(142, 192, 159);
display: inline-block;
/* display: inline; */
}
.box3 {
width: 200px;
height: 50px;
background-color: rgb(233, 152, 215);
display: inline-block;
/* display: inline; */
}
.outer {
height: 100px;
width: 700px;
background-color: rgb(194, 184, 177);
}
.inner {
width: 200px;
height: 50px;
background-color: rgb(41, 90, 181);
float: left;
}
</style>
<body>
<div class="box">不浮动DIV-【1】</div>
<div class="box0">
<div class="box1">box1(左浮动 - float:left)</div>
<div class="box2">box2(左浮动 - float:left)</div>
<div class="box3">box3(左浮动 - float:left)</div>
</div>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>