方法1：
1 <!DOCTYPE> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .one { 9 position: absolute; 10 height: 200px; 11 width: 300px; 12 background-color: blue; 13 } 14 15 .two { 16 height: 200px; 17 margin-left: 300px; 18 background-color: red; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div class="one"></div> 25 <div class="two">第一种方法</div> 26 </body> 27 28 </html>
方法2：
1 <!DOCTYPE> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 .one { 9 float: left; 10 height: 200px; 11 width: 300px; 12 background-color: blue; 13 } 14 15 .two { 16 overflow: auto; 17 height: 200px; 18 background-color: red; 19 } 20 </style> 21 </head> 22 23 <body> 24 <div class="one"></div> 25 <div class="two">第二种方法</div> 26 </body> 27 28 </html>
方法3：
1 <!DOCTYPE> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 #oo { 15 display: flex; 16 flex-wrap: wrap; 17 } 18 19 .one { 20 float: left; 21 height: 200px; 22 width: 200px; 23 background-color: blue; 24 } 25 26 .two { 27 background-color: red; 28 flex: 1; 29 } 30 31 .three { 32 background-color: pink; 33 flex: 2; 34 } 35 </style> 36 </head> 37 38 <body> 39 <div id="oo"> 40 <div class="one">1</div> 41 <div class="two">2</div> 42 <div class="three">3</div> 43 </div> 44 </body> 45 46 </html>