Ta có hai column(trái và phải) và ta mong muốn 2 column này luôn có chiều cao bằng nhau và luôn bằng parent chiều cao của parent có thể thay đổi như ví dụ hình bên dưới.
1. Ta dùng flex để giải quyết
HTML
<div class="parent"> <div class="col-left"> col-left line col-left line col-left line <br/> col-left line <br/> col-left line </div> <div class="col-right">col-right</div> </div>CSS
.parent { padding: 10px; background: yellow; display: flex; color: white; } .col-left { background: red; flex: 1; } .col-right { background: green; flex: 1; }2. Ta có thể dùng display-table để làm
HTML
<div class="padding-wrapper"> <div class="parent-wrapper"> <div class="parent"> <div class="col-left"> col-left line col-left line col-left line <br/> col-left line <br/> col-left line </div> <div class="col-right">col-right</div> </div> </div> </div>CSS
.padding-wrapper { background: yellow; padding: 10px; } .parent-wrapper { display: table; width: 100%; } .parent { display: table-row; color: white; } .col-left { background: red; display: table-cell; height: 100%; width: 50%; } .col-right { background: green; display: table-cell; width: 50%; }3. Ta có thể dùng table trong html
HTML
<div class="padding-wrapper"> <table> <tr> <td class="col-left"> col-left line col-left line <br/> col-left line <br/> col-left line </td> <td class="col-right"> col-right </td> </tr> </table> </div>CSS
.padding-wrapper { padding: 10px; background: yellow; color: white; } table { width: 100%; border-collapse: collapse; } td { vertical-align: top; } .col-left { background: red; width: 50%; } .col-right { background: green; width: 50%; }
No comments:
Post a Comment