哪个网站有做烘焙蛋糕专业的配方,18种禁用软件黄app入口,珠海网站建设最新报价,大气企业网站高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色#xff0c;高度相等还是不相等都无关紧要#xff0c;因为你只要在这些列的父元素中设置一个背景色就可以了。但是#xff0c;如果一个或多个列需要单独设置自己的背景色#xff0c;那么它…高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色高度相等还是不相等都无关紧要因为你只要在这些列的父元素中设置一个背景色就可以了。但是如果一个或多个列需要单独设置自己的背景色那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单但是我们使用CSS来创建等高列布局并非是那么容易的事情
如果一个设计是固定宽度非流体的宽度设计那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技术。只要制作一张合适的背景图片在你多列的父元素中进行垂直铺放从而达到一种假像假的多列等高布局效果。但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情因为我们没有办法在使用背景图片来实现多列等高的假像了那么是不是就没有办法实现了呢那当然不是那么回事了不管是实现固定布局还是流体布局的等多列等高视觉效果方法还是蛮多的这些方法体现了CSS的不同技术也各有千秋下面我们就一起来探讨Web页面中的多列等高的实现技术
下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果正如下图所示 方法1假等高列
这种方法是我们实现等高列最早使用的一种方法就是使用背景图片在列的父元素上使用这个背景图进行Y轴的铺放从而实现一种等高列的假像
HTML: 在制作样式之前需要一张类似下面的背景图: CSS: 这里让外部容器背景在Y轴延伸背景三列全部左浮动但是缺点是不适合流体布局等高列的布局另外如果你需要更换背景色或实现其他列数的等高列时都需要重新制作过背景图
方法2给容器div使用单独的背景色固定布局
这种方法实现有点复杂如果你理解其实现过程也是相当的简单。这种方法我们主要给每一列的背景设在单独的div元素上。这种方法的实现的原则是任何div元素的最大高度来撑大其他的div容器高度。如下图所示 上图中不管我们哪一列的高度最高那么其三个容器“rightBack,contentBack,leftBack”的高度相应会随最高列的高列变化下面我们一起来看其实现过程
HTML CSS 看起来蛮复杂吧其实你只要了解了它是如何的工作原理就会变得非常简单你只要理解并掌握以下几点
第一步首先给’.rightWrap’和’.leftWrap’还有’.contentWrap’三个列容器设置浮动让其具备包裹性同时设置其宽度跟父容器相同最后在三个列都和父容器等宽的前提下分别向左移动一段距离移动的距离就是你所要设置的列的宽度又因为这三个容器是父子关系所以子元素的高度变化必然导致父元素的高度一起变化所以这样最后的效果看起来就是三个列横向排布且等高的布局。
注意到此已经实现了三个列等高的效果但是因为内容还都是在外部的所以此时添加内容后的效果不好我们要做的就是将内容继续调整 我们发现包含内容的三个div都已经在外部我们需要将它们调整回来很明显现在的文字都在浅绿色容器内纵向排列我们只要知道将浅绿色容器移动回来的值那也就意味着知道了文字移动了回来的值因为既然是父子容器那么必然是叠加的上面的颜色层会改住下面的层只是现在移动开了所以露出了下面的层所以浅绿色移动回来的值等于它当初移动出去时候的距离’黄色的宽深绿色的宽’这里就是320420740px
第二步给每个子元素设置浮动后再将其的固定宽度设置为之前父子容器偏移的固定距离并且让其相对定位后偏移指定的距离即可(这个距离就是320420)因为这里是相对定位所以哪怕前面的元素通过left移动走了原来的空间还是要进行保留再加上浮动让后面的元素本身就和前面的元素在同行显示
用两幅图来展示其实现的过程
下图是实现上面的第二步对应的示例图也就是容器“div.rightWrap”“div.contentWrap”“div.leftWrap”进行相对定位position: releative,并展示了如何设置对应的“right”值 上图虚线代表的范围是可视范围其中有两列背景将会溢出解决这个只需要在最外层容器“div.rightWrap”加上“overflow:hidden”就可以进行隐藏溢出的其他背景色。接下来下图所展示的是上面所说的第五步 前面我们对三个内容元素都进行了相对定位现在只需要按第五步将其定位回去如上图所示。其实说到最后你只要理解了这两幅你就什么都清楚了
缺点这种方法不像其他方法一样简单明了给你理解会带来一定难度但是只要你理解清楚了将能帮你创建任意列数的等高布局效果
