三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透
网上相关的文章很多,原本已无必要再做赘述
不过既然开了 Layout 系列,三列布局就是必修课
本文整理了一些常用的实现方法,然后加入了一些个人愚见,希望能给诸位看官一些新的启发
效果图:
最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧
HTML 结构:
CSS 样式:
{:;
}{:;:;:;
}{:;
}{:;
}{:;
}
绝对定位方案的变种,利用 margin 可以设置负值的特性,模拟出类似于定位的效果,应用最广的方案
HTML 结构:
CSS 样式:
{:;
}{:;:;
}{:;: ;:;
}{:;
}
这种方案的重点在于,中间列 main 一定要用双层标签,外层为容器,内层才是主体内容
三列都设置了浮动 float,可以用 display: inline-block 替换
关于这种方案还有一种变式:
将中间列的 html 部分挪到最前,然后 left 容器设置 margin-left: -100%
这种方案也能实现同样的效果,但由于 html 结构的顺序发生了改变,所以我更推荐使用原始方案
流式布局,分别设置左列 float:left 和右列 float:right,然后让中间列“流”入两列之间
HTML 结构:
CSS 样式:
{:;
}{:;
}{:;
}{:;
}{:;
}
因为使用了左右浮动,所以不能用 display:inline-block 替换,而且中间列必须放到最后
最简单省事儿但兼容性最差的方案,可以用在移动端
HTML 结构:
CSS 样式:
{:;
}{:;
}{:;:;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。