网页布局教程:CSS多列布局问题简单解决方案
。如果不浮动容器,内容 div 将会从容器底部溢出,容器不会拥有正确的高度。事实上在此例中,容器不浮动的话其最终高度为0。
增加额外嵌套的容器 下一步是增加额外的容器,它们彼此嵌套。我们需要容器的数量等于列的数量:3。这 3 个容器用作各列的背景。请注意,我们去除了原始列的背景色,并将其加至容器上。 3列 HTML div 结构 两个额外的容器加至下面的 HTML 中。
3 列 CSS 所有元素左浮动,容器宽度设为100%,使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。
用相对定位移动容器 现在用相对定位把容器移至新的位置。移动后 div 如下图所示。即等高列背景容器的层叠和位置。为了显示右侧的绿色列 container2 向左移了30%,为了显示中间的黄色列 container1 向左移动了40%,与此同时红色部分依然可见作为左侧列。 相对定位的 CSS 下面是添加了相对定位的CSS。
将每列的内容移回 下一步是把每列的内容移回到页面上,使之排列在下面的背景色上。再次使用简单的相对定位来完成它。 最后在最外面的容器 container3 上添加 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |