webveuje/csspress/demo/float.html

71 lines
1.8 KiB
HTML
Raw Permalink Normal View History

2021-01-05 09:18:22 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
2021-01-12 14:02:30 +08:00
.box{
width: 1000px;
height: 300px;
background: gold;
margin: 20px;
2021-01-05 09:18:22 +08:00
}
.box1{
2021-01-18 18:11:23 +08:00
/* width:60px;
height: 60px; */
2021-01-12 14:02:30 +08:00
background: red;
/* background: rgba(255, 0, 0, 0.363); */
2021-01-18 18:11:23 +08:00
/* float: left; */
2021-01-12 14:02:30 +08:00
2021-01-05 09:18:22 +08:00
}
.box2{
2021-01-12 14:02:30 +08:00
width: 120px;
height:80px;
background: gray;
border: 1px solid pink;
/* float:right */
2021-01-18 18:11:23 +08:00
float: left;
2021-01-12 14:02:30 +08:00
}
.a{
/* width: 70px;
height: 70px;
border: 1px solid blue;
background: pink; */
clear: right;
2021-01-05 09:18:22 +08:00
}
</style>
</head>
<body>
2021-01-12 14:02:30 +08:00
<div class="box">
2021-01-18 18:11:23 +08:00
<div class="box1">asaaaa</div>
<div class="box2"></div>
<div class="box2"></div>
2021-01-20 11:25:18 +08:00
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
2021-01-18 18:11:23 +08:00
<!-- <div class="box1"></div>
2021-01-12 14:02:30 +08:00
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2">1</div>
<div class="box2">2</div>
<div class="box2">3</div>
<div class="box2">4</div>
<div class="box2">5</div>
<div class="box2" style="height: 180px;">6</div>
<div class="a"></div>
2021-01-18 18:11:23 +08:00
<div>nhjksahkihfi</div> -->
2021-01-12 14:02:30 +08:00
</div>
2021-01-05 09:18:22 +08:00
</body>
</html>