来讲讲：CSS计划多列多模块等高网页结构

显示全部楼层 · 发表于 2015-1-16 00:07:33

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
　　起首给人人看一个图：

　　之前我们在结构这类必要多列多模块，多列等高，一样平常会选择横着切一张背景图来举行摹拟，这个也是没有举措的举措。
　　我们晓得纯真的两列等高我们能够使用正内边距加负外边距来完成。padding-bottom:32767px;margin-bottom:-32767px;
　　这个办法的道理是事前经由过程正内边距来使其具有充足高的结构控件，然后经由过程负外边距来使得其的地位稳定。经由过程给父元素溢出埋没，我们能够埋没失落事前占有的充足高的空间。由两列实践的内容高度来决意全部父元素的高度，从而完成了等高。
　　习气头脑上，我们都是多列等高，然后把这几列都浮动。如今我们变更一下思绪，间接利用不浮动的一列的时分，情形会如何，我们发明，当一列不浮动搭配正内边距加负外边距，父元素溢出埋没，它的高度跟仍是由内涵元从来决意，可是经由过程webdevelopertoolbar我们能够看到它实践上已占有了充足的高度空间。

登录/注册后可看大图

　　一样的事理，定位也遵守这个划定规矩。我们能够把两侧边框利用相对定位来流动到两侧，由于相对定位是不占结构空间的，那末我们必要一个文档流来对父元素举行占位。基础上父元素有多高，就显现相对定位的元素几内容，实践上这也就完成了一个等高。
　　晓得了这个体现道理，那末我们上文的结构也就不难了，只必要把每列最初一个模块再举行正内边距加负外边距来举行空间占位就能够完成了！至于下边框，实践上别的一个容器从底下举行拼装完成的~！
　　上面放上全体代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无题目1</title><styletype="text/CSS">*{margin:0;padding:0;}body{margin:30px;font:14px/1.6emVerdana,Lucida,Arial,Helvetica,宋体,sans-serif;}.main{overflow:hidden;width:800px;margin:0auto;}.left{float:left;width:250px;overflow:hidden;}.center{float:left;margin-left:5px;width:295px;}.right{float:right;width:245px;overflow:hidden;}.bor_top{height:1px;background:#FB9D51;overflow:hidden;}.equal{padding-bottom:32767px;margin-bottom:-32767px;}.box{background:#F5E2AF;border:1px#FB9D51solid;padding-left:10px;padding-right:10px;}.mt5{margin-top:5px;}</style></head><body><divclass="main"><divclass="leftequal"><divclass="box"><p>你信任这个摆布等高的结构是纯的CSS写的吗？</p></div><divclass="boxmt5"><p>来测试一下吧？~！</p></div><divclass="boxmt5"><p>测试一下</p></div><divclass="equalmt5box"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div><divclass="centerequal"><divclass="box"><p>忍不住你不信，这个切实其实是纯CSS写的</p></div><divclass="boxmt5"><p>来测试一下吧？~！</p></div><divclass="boxmt5"><p>测试一下</p></div><divclass="equalmt5box"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div><divclass="equalright"><divclass="box"><p>测试一下</p><p>测试一下</p></div><divclass="boxmt5"><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><divclass="boxmt5"><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p><p>测试一下</p></div><divclass="equalmt5box"><p>测试一下</p><p>测试一下</p><p>测试一下</p></div></div></div><divclass="main"><divclass="leftbor_top"></div><divclass="centerbor_top"></div><divclass="rightbor_top"></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
　　上述代码在IE6,IE7,FIREFOX里皆能一般显现，可是在IE8BETA1内里，仿佛必需共同浮动，正内边距跟负外边距的过剩空间才干被埋没，但愿正式版的IE8会修复这一点。假如想在IE8BETA1内里一般显现，请人人把最初一个模块也举行浮动便可~！在此就不做演示了！

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。

显示全部楼层 · 发表于 2015-2-26 02:50:35

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来讲讲：CSS计划多列多模块等高网页结构

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子