你的位置:首页 > 软件开发 > 网页设计 > 等高分栏布局小结

等高分栏布局小结

发布时间:2016-02-01 10:00:14
上一篇文章《圣杯布局小结》总结了几种常见的分栏布局方法,这几个方法都可以实现多栏页面下,所有栏的高度可动态变化,某一栏宽度自适应的布局效果,能满足工作中很多布局需求。后来我在搜集更多关于分栏布局的文章时,发现了一个新的问题,这个问题在前面那篇文章中也有朋友在评论里跟我提起,就是如 ...

上一篇文章《圣杯布局小结》总结了几种常见的分栏布局方法,这几个方法都可以实现多栏页面下,所有栏的高度可动态变化,某一栏宽度自适应的布局效果,能满足工作中很多布局需求。后来我在搜集更多关于分栏布局的文章时,发现了一个新的问题,这个问题在前面那篇文章中也有朋友在评论里跟我提起,就是如何在实现分栏布局的同时保证每栏的高度相同。我发现这种等高分栏布局的情况,在网站里面其实也很常见,所以本文总结了几种可用的方法来解决这个新的需求。

1. 方法一:万能的flex

跟上篇文章不同,这次把flex这种方法放在了第一位,因为相比较起来,它是所有分栏布局方法里面,优点最多的,如果兼容性允许的话,很有必要在任何时候都优先使用它完成页面布局。如果你打开上篇文章,找到倒数第二部分关于flex实现分栏布局的代码,或者把上篇文章提供的代码下载下来,直接预览flex_layout.html,你会发现上篇文章的那段代码其实已经做到了等高分栏布局,同一段代码,可以实现上篇文章中提到的五种分栏布局,还可以实现本文提到的等高布局的情况,这种能力其它方法真的无法比拟。而它之所以能实现等高布局,跟一个flex的css属性有关系,这个属性是:align-item。它的默认值是:stretch,在flex item元素比如layout__main或layout__aside的高度未定义或者为auto的情况下,会拉伸flex item元素的高度或宽度,铺满flex的交叉轴,详细的原理可以通过上文提供的flex学习资源去了解,这里只做一个简单的引用说明。

2. 方法二:使用table或者伪table

上篇文章中还有另外两种布局方法没有介绍,第一种就是这里要说的table布局或者伪table布局。table布局用的就是table tr td这些元素去实现,相信绝大部分web开发人员在入门html时,首先接触到的布局方法肯定就是table布局了,这种方法简单高效,用它做任何分栏布局都不是问题,只是因为table的嵌套结构太多,html冗杂,又不利于DOM的操作和渲染,用来布局不符合语义,总之缺点较多,所以目前的环境下,用的情况越来越少了。伪table布局其实跟table布局类似,只不过借助于css,可以让我们不直接使用table tr td这些直接的表格元素,而是通过display: table, display: table-row, display: table-cell,改变元素的显示特性,让浏览器把这些元素当成table来渲染,这种渲染的表现跟用真实的table没有啥区别,就连那些table专用的css属性,比如table-layout,border-collapse和border-spacing,都能产生效果。table布局的方法已经很少被采用了,本文也就没必要再去介绍,但是伪table布局的方法值得学习一下,经过这两天的学习,发现伪table的方式相比直接用表格布局,有不少的优点,值得运用到工作中去。不过在说明使用伪table布局的方法之前,得先了解一些伪table相关的知识:

1)可用于伪table表现的display属性值有:

等高分栏布局小结

2)当把一个元素的display属性设置成以上列出的值后,就可以把这个元素看成与该属性对应的表格元素,比如table-cell对应的就是td;同时,这个元素会拥有跟表格元素一样的特性,比如display: table或者inline-table的元素可以使用table-layout,border-collapse和border-spacing这三个原本只有table才能生效的属性;display:table-cell的元素跟td一样,对宽度高度敏感,对margin值无反应,对padding有效。

3)关于table-cell还有一点要说明的就是,它会被其他一些CSS属性破坏,例如float, position:absolute,所以这些个属性不能同时使用。

4)跟直接使用表格元素不同的是,在使用表格元素的时候需要完全遵守表格元素嵌套结构,也就是下面这种:

<table>  <thead>    <th></th>  </thead>  <tbody>    <tr>      <td></td>    </tr>  </tbody>  <tfoot>    <th></th>  </tfoot></table>

原标题:等高分栏布局小结

关键词:

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

可能感兴趣文章

我的浏览记录