03浮动 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .outerDiv{
 9             width: 500px;
10             height: 300px;
11             border: 1px solid rgb(236, 132, 132);
12             background-color: rgb(141, 228, 240);
13         }
14 
15         .innerDiv{
16             width: 100px;
17             height: 100px;
18             border: 1px solid rgb(136, 232, 135);
19             /* 元素展示方式
20             display: inline;   inline 行内元素宽高设置失效 */
21         }
22 
23         .d1{
24             background-color: rgb(229, 237, 162);
25             float: left;
26         }
27 
28         .d2{
29             background-color: rgb(249, 215, 170);
30             float: left;
31         }
32 
33         .d3{
34             background-color: rgb(176, 176, 238);
35             float: left;
36         }
37 
38     </style>
39 </head>
40 <body>
41     <!-- <div> 用来分割区域 -->
42     <div class="outerDiv">
43         <div class="innerDiv d1">div1</div>
44         <div class="innerDiv d2">div2</div>
45         <div class="innerDiv d3">div3</div>
46     </div>
47 </body>
48 </html>

 

posted @ 2024-03-08 15:51  白茶花约  阅读(6)  评论(0)    收藏  举报