几种常见的布局方式(二)

三列布局

两侧两列固定宽度，中间列自适应宽度

三列布局.png

如何实现 实例代码如下

  
aside
  
aside
  
main

  
尾部

效果图如下

三列布局左右固定中间自适应.png

水平等距排列

思路：li的大小 和margin的间距加起来刚好等距于ct的大小 然后利用负margin进行排列，刚好完完整整排下。
范例如下

 

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
  

效果图如下：

水平等距排列布局.png

圣杯布局

• 是三列布局，两边固定宽度，中间自适应
• 中间内容元素在 dom 元素次序中优先位置
  范例如下

  
main
  
aside
  
extra

效果图如下

圣杯布局.png

• 缺点：.mian的最小宽度不能小于.aside的宽度

双飞翼布局

和圣杯布局有异曲同工之妙 解决了圣杯布局的缺点
范例如下

  

    
main
  
  
aside
  
extra

效果图如下 ：

双飞翼布局.png

流式布局

bootstrap讲解 我们实现一个简单的栅格系统

弹性布局flex

flex讲解 范例

grid

grid相关文章

移动端布局

1. 设置 meta ，如

1. 适配

媒体查询 or 动态 rem