今天小编跟大家讲解下有关CSS实现页面两列布局与三列布局的方法示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现页面两列布局与三列布局的方法示例 的相关资料，希望小伙伴们看了有所帮助。
1. 使用BFC的原理实现BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。html代码如下XML/HTML Code复制内容到剪贴板 <divclass="left"></div> <divclass="right"></div> <divclass="main"></div>css代码如下CSS Code复制内容到剪贴板 .left{ float:left; margin-right:10px; width:100px; height:100px; background-color:orange; } .rightright{ float:rightright; margin-left:10px; width:100px; height:100px; background-color:orange; } .main{ height:100px; background-color:green; overflow:hidden; }2.双飞翼布局这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。实现原理：（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。html代码如下XML/HTML Code复制内容到剪贴板 <divclass="wrap"> <divclass="main-content"> <divclass="main"></div> </div> <divclass="left"></div> <divclass="right"></div> </div>css代码如下CSS Code复制内容到剪贴板 .wrap{ width:100%; } .wrap::after{ display:block; content:''; font-size:0; height:0; clear:both; zoom:1; } .main-content{ float:left; width:100%; } .main{ height:100px; background-color:green; margin-left:110px; margin-right:110px; } .left{ float:left; width:100px; height:100px; background-color:orange; margin-left:-100%; } .rightright{ float:left; width:100px; height:100px; background-color:orange; margin-left:-100px; }3.圣杯布局圣杯布局在结构上要简单一点，也能够让主列优先加载。实现原理：（1）添加一个包裹框，设置padding-leftpadding-right值，比子列宽度大一个空隙的宽度。（2）主列，子列都设置为float: left 左子列margin-left设置为-100%，并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。（3）主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%，自适应即可。html代码如下XML/HTML Code复制内容到剪贴板 <divclass="wrapper"> <divclass="main"></div> <divclass="left"></div> <divclass="right"></div> </div>css代码如下CSS Code复制内容到剪贴板 .wrapper{ padding-left:110px; padding-right:110px; overflow:hidden; } .main{ float:left; width:100%; height:100px; background-color:#ccc; } .left{ float:left; width:100px; height:100px; margin-left:-100%; position:relative; left:-110px; _left:0; background-color:orange; } .rightright{ float:left; width:100px; height:100px; background-color:orange; margin-left:-100px; position:relative; rightright:-110px; }下面再给出一个高度占满全屏的例子：CSS Code复制内容到剪贴板 <p><!DOCTYPEhtml> <htmlxmlns="<atarget="_blank"href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <headrunat="server"> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title></title> <styletype="text/css"> body,html{ margin:0px; } #header{ background:blue; height:100px; width:100%; position:relative; top:0; } #header#h_menu{ position:absolute; bottombottom:0; background:yellow; width:100%; height:50px; } #middle{ position:absolute; width:100%; height:auto; top:100px; bottombottom:50px; } .left{ width:15%; background:red; float:left; height:100%; } .rightright{ width:15%; height:100%; background:pink; float:rightright; } .center{ height:100%; background:green; margin:auto; } #footer{ background:blue; height:50px; width:100%; position:absolute; bottombottom:0; } </style> </head> <body> <formid="form1"runat="server"> <div> <divid="header"> 上 <divid="h_menu"> 上_底 </div> </div> <divid="middle"> <divclass="left"> 中左 </div> <divclass="right"> 中右 </div> <divclass="center"> 中间 </div> </div> <divid="footer"> 下 </div> </div> </form> </body> </html> </p>来源：爱蒂网
