1.将浮动居中

这需要三个盒子 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .Bar{
12             width: 500px;
13             height: 500px;
14             background-color: yellow;
15 
16         }
17         /*这里利用将在Bar盒子后面加入father子盒子
18         因为只能放一个 所以会居中 然后在加入一个浮动的盒子
19         作为father的子盒子根据宽度一样添加进去*/
20         .father{
21             width: 100px;
22             height: 100px;
23             background-color: cornflowerblue;
24             overflow: hidden;
25             margin: 0 auto;
26         }
27         /*浮动的*/
28         .set{
29             width: 100px;
30             height: 150px;
31 
32             background-color: darkcyan;
33             margin: 0 auto;
34             float: left;
35         }
36 
37     </style>
38 </head>
39 <body>
40     <div class="Bar">
41         <div class="father">
42             <div class="set">
43             </div>
44         </div>
45     </div>
46 
47 </body>
48 </html>
浮动盒子居中

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-03-11
  • 2022-12-23
  • 2021-12-19
  • 2021-11-18
猜你喜欢
  • 2021-10-09
  • 2021-06-15
  • 2021-08-01
  • 2022-12-23
  • 2021-07-19
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案