css的两栏布局
经典的实现左边固定宽度,右边宽度自适应的几种方法
- 利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度)
.left{ width: 30px; float: left; background-color: red; } .right{ margin-left: 50px; background-color: blue; }
2.利用position和margin属性
.parent{ position: relative; } .left{ position: absolute; left: 0; width: 50px; background-color: red; } .right{ margin-left: 50px; background-color: blue; }
3.flex布局
.parent { display: flex; align-items: flex-start; } .left { flex: 0 0 auto; background-color: red; } .right { flex: 1 1 auto; background-color: blue; }
或者也可以使用flex-grow属性,直接在.right上面申明flow-grow属性为1,.right将自动填充剩余的空间
.parent{ display: flex; } .left {
width: 50px; background-color: red; } .right { flex-grow: 1; background-color: blue; }