首页 相关文章 CSS设计多列多模块等高网页布局

CSS设计多列多模块等高网页布局

  首先给大家看一个图:

  以前我们在布局这种需要多列多模块,多列等高,一般会选择横着切一张背景图来进行模拟,这个也是没有办法的办法。

  我们知道单纯的两列等高我们可以利用正内边距加负外边距来实现。padding-bottom:32767px; margin-bottom:-32767px;

  这个方法的原理是事先通过正内边距来使其拥有足够高的布局控件,然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏,我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度,从而实现了等高。

  习惯思维上,我们都是多列等高,然后把这几列都浮动。现在我们变换一下思路,直接使用不浮动的一列的时候,情况会怎样,我们发现,当一列不浮动搭配正内边距加负外边距,父元素溢出隐藏,它的高度跟还是由内在元素来决定,但是通过web develo...[ 查看全文 ]

2016-02-19 标签:

CSS设计多列多模块等高网页布局的相关文章

手机页面
收藏网站 回到头部