CSS - 三栏响应式布局

第一种,float布局实现

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

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

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

第二种,定位布局+margin

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

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

第三种,display:table 实现

父元素display:table;

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

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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注