CSS – 三栏响应式布局

  • A+
所属分类:其他

第一种,float布局实现

这绝对是我大脑能第一下想到的

左右两栏分别左浮动、右浮动。

中间栏使用margin/padding撑开左右两栏需要占据的位置即可。

第二种,定位布局+margin

左右栏分别使用absolute定位,同float一样,左边的定位left 0,右边的定位right 0;

中间还是用margin或padding撑开左右栏需要占据的位置即可。(利用了浮动或定位时,结构飘起来不占据文档空间的特点)

第三种,display:table 实现

父元素display:table;

左右子元素使用display:table-cell;

中间正常文档流,margin撑开间距即可

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: