Web页面布局
要求:三栏布局左右各300像素,中间自适应
HTML结构
1 |
|
一、浮动
1 | .container{ overflow: hidden; } |
上面的HTML结构要调整下
1 |
|
使用
1 | .container{ overflow: hidden; } |
实现左边栏始终随center部分撑满页面
二、绝对定位
1 | .container{ position: relative; } |
三、table
1 | .container{ display: table; width: 100%; } |
四、flex
1 | .container{ display: flex; overflow: hidden;} |
五、网格grid
1 | .container{ display: grid; grid-template-rows: auto; grid-template-columns: 300px auto 300px; } |