加入收藏 | 学校主页
首页 > 研究课题 > 正文

html+css三列布局

作者: 时间:2017-10-30 点击数:

三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见,那么什么是三栏布局?比如我打开京东的首页:

说明: https://pic1.zhimg.com/50/v2-a0098f2bc21152879d2cfe3888a040f8_hd.jpg映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。

下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示:

说明: https://pic3.zhimg.com/50/v2-4535c7dd53d222b7948bfd439c790bfe_hd.jpg红色和蓝色宽度固定,绿色宽度自适应,下面七种方法实现的最终效果跟这个差不多,可能会稍有不同。

下面七种技巧各有千秋,在开发中可以根据实际需求选择适合自己的方法进行编码。

1.流体布局

="en">

="container">

="left">

="right">

="main">

左右模块各自向左右浮动,并设置中间模块的 margin 值使中间模块宽度自适应。

缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验。

2. BFC三栏布局

BFC规则有这样的描述:BFC 区域,不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。

="en">

="container">

="left">

="right">

="main">

缺点跟方法一类似,主要内容模块无法最先加载,当页面中内容较多时会影响用户体验。因此为了解决这个问题,有了下面要介绍的布局方案双飞翼布局。

3.双飞翼布局

="en">

="content">

="main">

="left">

="right">

利用的是浮动元素 margin 负值的应用,感兴趣的同学可以上网搜搜原理。

主体内容可以优先加载,HTML 代码结构稍微复杂点。

4.圣杯布局

="en">

="container">

="main">

="left">

="right">

跟双飞翼布局很像,有一些细节上的区别,相对于双飞翼布局来说,HTML 结构相对简单,但是样式定义就稍微复杂,也是优先加载内容主体。

5. Flex布局

="en">

="container">

="main">

="left">

="right">

简单实用,未来的趋势,需要考虑浏览器的兼容性。

6. Table布局

="en">

="container">

="left">

="main">

="right">

缺点:无法设置栏间距

7.绝对定位布局

="en">