如图：
代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <meta charset="utf-8"> 4 <head> 5 <link href="flex.css" rel="stylesheet" type="text/css"> 6 </head> 7 <body> 8 9 <h1></h1> 10 <div class="container"> 11 <div class="row1"> 12 <div class="left" > 13 <div class="left-top"> <p>LEFT-TOP</p></div> 14 <div class="left-bottom"> <p>LEFT-BOTTOM</p></div> 15 </div> 16 <div class="right">RIGHT</div> 17 </div> 18 <div class="row2"> 19 <p>BOTTOM</p> 20 <p>BOTTOM</p> 21 <p>BOTTOM</p> 22 <p>BOTTOM</p> 23 <p>BOTTOM</p> 24 <p>BOTTOM</p> 25 <p>BOTTOM</p> 26 <p>BOTTOM</p> 27 </div> 28 </div> 29 30 31 </body> 32 </html>
CSS文件：
1 .container{
2 display: flex;
3 display: -webkit-flex;
4 flex-direction: column;
5 overflow: hidden;
6 }
7 .row1{
8 display: flex;
9 display: -webkit-flex;
10 flex-direction: row;
11 }
12 .left{
13 display: flex;
14 display: -webkit-flex;
15 flex-direction: column;
16 flex: 1;
17 height: 655px;
18 }
19 .left-top{
20 height: 295px;
21 flex: 1;
22 background:yellow;
23 }
24 .left-bottom{
25 margin-top: 10px;
26 flex: 1;
27 background: rebeccapurple;
28 }
29 .right{
30 flex: 3;
31 background:burlywood;
32 }
33 .row2{
34 min-height: 300px;
35 overflow: auto;
36 height: 400px;
37 background: red;
38 }
39 body{
40 overflow: hidden;
41 }
时间： 2024-10-09 20:42:49