<div class="parent"> <div class="col-left">column left 200px</div> <div class="col-left">column right</div> </div>Yêu cầu: Cố định column left 200px, phần còn lại thuộc về column bên phải.
I) Cố định column bên trái.
1. Ta dùng float vs calc trong css
.col-left { float: left; width: 200px; background: yellow; } .col-right { float: left; width: calc(100% - 200px); background: red }2. Ta dùng float vs margin-left trong css
.col-left { float: left; width: 200px; background: yellow; } .col-right { margin-left: 200px; background: red }3. Ta dùng flex-grow vs flex-basis trong css
.parent { display: flex; } .col-left { flex-basis: 200px; background: yellow; } .col-right { flex-grow: 1; background: red }4. Ta dùng display-table, display-row, display-cell trong css
html
<div class="parent"> <div class="wrapper-row"> <div class="col-left">column left 200px</div> <div class="col-right">column right</div> </div> </div>
.parent { display: table; width: 100%; } .wrapper-row { display: table-row; } .col-left { display: table-cell; background: yellow; width: 200px; } .col-right { display: table-cell; background: red; }5. Ta dùng table trong html
html
<table> <tr> <td class="col-left">column left 200px</td> <td class="col-right">column right</td> </tr> </table>css
table { width: 100%; } .col-left { width: 200px; background: yellow; } .col-right { background: red; }II) Cố định column bên phải
Cũng giống như cố định column bên trái, ta hoàn toàn có thể sử dụng kỹ thuật như ở trên I1, I3, I4, I5.
riêng đối với I2 thì sẽ khác một chút, ta cần dùng thêm direction rtl trong css
<div class="parent"> <div class="col-left">column right 200px</div> <div class="col-right">column left</div> </div>
.parent { direction: rtl; } .col-left { float: right; width: 200px; background: yellow; } .col-right { margin-right: 200px; background: red; }
No comments:
Post a Comment