標籤：play doc ott width border bsp 左右 har char
方法一: 通過父級overflow:hidden, 自己設定padding-bottom 和 margin-bottom來實現.
1 #wrap{ 2 overflow:hidden; 3 width:1000px; 4 margin:0 auto; 5 } 6 #left,#center{ 7 margin-bottom:-10000px; 8 padding-bottom:10000px; 9 }10 #left{11 float:left;12 width:250px;13 background:#00FFFF;14 }15 #center{16 float:left;17 width:500px;18 background:#FF0000;19 }
參考連結: 純css實現div左右等高
方法二: 使用 table-cell
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .left, 8 .right { 9 padding: 10px;10 display: table-cell;11 border: 1px solid #f40;12 }13 </style>14 </head>15 <body>16 <div class="wrap">17 <div class="left">18 left div19 <br/>20 <br/>21 <br/>22 <br/>23 <br/>24 </div>25 <div class="right">right div</div>26 </div>27 </body>28 </html>
參考連結: 純css實現div左右等高
方法三:使用css3盒模型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .wrap { 8 display: -webkit-box; 9 }10 .left,11 .right {12 padding: 10px;13 border: 1px solid #f40;14 }15 </style>16 </head>17 <body>18 <div class="wrap">19 <div class="left">20 left div21 <br/>22 <br/>23 <br/>24 <br/>25 <br/>26 </div>27 <div class="right">right div</div>28 </div>29 </body>30 </html>
參考連結: 純css實現div左右等高
css 實現 左右div 等高, 同時父級div就是最高的子div的高度.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
