单列布局
设置布局容器(最大)宽度以及左右边距为 auto 即可实现
2列 3列布局步骤
(1)为了保证主要布局容器优先级,应将主要布局容器写在次要布局容器之前。
(2)将布局容器进行水平排列;
(3)设置宽度,即次要容器宽度固定,主要容器撑满;
(4)消除布局方式的副作用,如浮动造成的高度塌陷;
(5)为了在窄屏下也能正常显示,可以通过媒体查询进行优化。
2列布局
1 | <div class="wrap"> |
1 | .wrap { |
3列布局
1 | <div class="wrap"> |
1 | .main, .left, .right { |
标准圣杯布局没有媒体查询
垂直方向的布局 上中下
1 | <div class="container"> |
1 | .container { |