你的位置:首页 > 软件开发 > 网页设计 > CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

发布时间:2016-01-27 09:00:05
今天聊聊一个经典的布局实例:实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现。不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局。1. 首先,使用浮动布 ...

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例:

实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现。不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局。

1. 首先,使用浮动布局来实现一下

See the Pen float-three-columns by xal821792703 (@honoka) on CodePen.

  1. 左侧元素与右侧元素优先渲染,分别向左和向右浮动
  2. 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动插入到左右两列元素的中间,随后设置 margin 左右边距分别为左右两列的宽度,将中间元素调整到正确的位置。

这是一种比较便利的实现方式,无需额外的元素辅助定位,同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定,中间自适应这一种三列布局,灵活性不强。

2. 其实,也可以试试利用 BFC

See the Pen bfc-three-columns by xal821792703 (@honoka) on CodePen.

昨天的《CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局》已经谈到了利用 BFC 原理实现多列布局的方法。BFC 元素不会与浮动元素叠加,自然也可以利用 BFC 原理完成这个实例。

  1. 同样的左右两列元素优先渲染,并分别左右浮动。
  2. 接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块,不与两侧浮动元素叠加,则自然能够插入自己的位置啦。

3. 接下来就尝试一下大名鼎鼎的双飞翼布局吧

See the Pen grid-three-columns by xal821792703 (@honoka) on CodePen.

双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法,主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。

接下来就简单介绍一下双飞翼的实现过程:

  1. 假设我们现在需要一个如实例说明一样的三列布局,写出如下 div 结构:
    <div class="grid">  <div id="div-middle-02"><span>div-middle</span></div>  <div id="div-left-02"><span>div-left</span></div>  <div id="div-right-02"><span>div-right</span></div></div>

    原标题:CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

    关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。