首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS实现页面两列布局与三列布局的方法示例

所属分类： 网页制作 / CSS 阅读数： 665
收藏 0 赞 0 分享
1. 使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
html代码如下
XML/HTML Code复制内容到剪贴板
  1. <div class="left"></div>  
  2. <div class="right"></div>  
  3. <div class="main"></div>  
css代码如下
CSS Code复制内容到剪贴板
  1. .left {   
  2.   float: left;   
  3.   margin-right: 10px;   
  4.   width: 100px;   
  5.   height: 100px;   
  6.   background-color: orange;   
  7. }   
  8. .rightright {   
  9.   float: rightright;   
  10.   margin-left: 10px;   
  11.   width: 100px;   
  12.   height: 100px;   
  13.   background-color: orange;   
  14. }   
  15. .main {   
  16.   height: 100px;   
  17.   background-color: green;   
  18.   overflow: hidden;   
  19. }  
2.双飞翼布局
这种布局方案最早由淘宝提出，主要为了主列能够被最先加载。
实现原理：
（1）让主列外面添加一个wrap，主列wrap，以及2子列都左浮动。
（2）设置主列wrap宽度为100%，将子列的margin-left设置为负值，让子列能够排列在左右两侧。
（3）这是主列的margin-left与margin-right比左右两列的宽度大一点，则可以设置出来主列与子列之间的间隙。
html代码如下
XML/HTML Code复制内容到剪贴板
  1. <div class="wrap">  
  2.   <div class="main-content">  
  3.     <div class="main"></div>  
  4.   </div>  
  5.   <div class="left"></div>  
  6.   <div class="right"></div>  
  7. </div>  
css代码如下
CSS Code复制内容到剪贴板
  1. .wrap {   
  2.   width: 100%;   
  3. }   
  4. .wrap::after {   
  5.   display: block;   
  6.   content: '';   
  7.   font-size: 0;   
  8.   height: 0;   
  9.   clear: both;   
  10.   zoom: 1;   
  11. }   
  12. .main-content {   
  13.   float: left;   
  14.   width: 100%;   
  15. }   
  16. .main {   
  17.   height: 100px;   
  18.   background-color: green;   
  19.   margin-left: 110px;   
  20.   margin-right: 110px;   
  21. }   
  22. .left {   
  23.   float: left;   
  24.   width: 100px;   
  25.   height: 100px;   
  26.   background-color: orange;   
  27.   margin-left: -100%;   
  28. }   
  29. .rightright {   
  30.   float: left;   
  31.   width: 100px;   
  32.   height: 100px;   
  33.   background-color: orange;   
  34.   margin-left: -100px;   
  35. }  
3.圣杯布局
圣杯布局在结构上要简单一点，也能够让主列优先加载。
实现原理：
（1）添加一个包裹框，设置padding-leftpadding-right值，比子列宽度大一个空隙的宽度。
（2）主列，子列都设置为float: left 左子列margin-left设置为-100%，并且设置为position:relative; left: -110px将左子列放置到左侧。右子列同理。
（3）主列只需设置宽度为100%即可。包裹框的宽度不要设置为100%，自适应即可。
html代码如下
XML/HTML Code复制内容到剪贴板
  1. <div class="wrapper">  
  2.   <div class="main"></div>  
  3.   <div class="left"></div>  
  4.   <div class="right"></div>  
  5. </div>  
css代码如下
CSS Code复制内容到剪贴板
  1. .wrapper {   
  2.   padding-left: 110px;   
  3.   padding-right: 110px;   
  4.   overflow: hidden;   
  5. }   
  6. .main {   
  7.   float: left;   
  8.   width: 100%;   
  9.   height: 100px;   
  10.   background-color: #ccc;   
  11. }   
  12. .left {   
  13.   float: left;   
  14.   width: 100px;   
  15.   height: 100px;   
  16.   margin-left: -100%;   
  17.   position: relative;   
  18.   left: -110px;   
  19.   _left: 0;   
  20.   background-color: orange;   
  21. }   
  22. .rightright {   
  23.   float: left;   
  24.   width: 100px;   
  25.   height: 100px;   
  26.   background-color: orange;   
  27.   margin-left: -100px;   
  28.   position: relative;   
  29.   rightright: -110px;   
  30. }  
下面再给出一个高度占满全屏的例子：
CSS Code复制内容到剪贴板
  1. <p><!DOCTYPE html>     
  2. <html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">     
  3. <head runat="server">     
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
  5.     <title></title>     
  6.     <style type="text/css">     
  7.         body, html {     
  8.             margin: 0px;     
  9.         }     
  10.         #header {     
  11.             background: blue;     
  12.             height: 100px;     
  13.             width: 100%;     
  14.             position: relative; /*父div的位置设置成相对的*/     
  15.             top: 0;     
  16.         }     
  17.             #header #h_menu {     
  18.                 position:absolute;     
  19.                 bottombottom:0;     
  20.                 background:yellow;     
  21.                 width:100%;     
  22.                 height:50px;     
  23.             }     
  24.         #middle {     
  25.             position:absolute;     
  26.             width:100%;     
  27.             height:auto;     
  28.             top: 100px;     
  29.             bottombottom:50px;                       
  30.         }     
  31.         .left {     
  32.             width: 15%;    /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/     
  33.             background: red;     
  34.             float: left;     
  35.             height:100%;     
  36.         }     
  37.         .rightright {     
  38.             width: 15%;  /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/     
  39.             height: 100%;     
  40.             background: pink;     
  41.             float: rightright;     
  42.         }     
  43.         .center {     
  44.             height: 100%;     
  45.             background: green;     
  46.             /*两种方式均可（一）margin(二)margin-left、margin-right*/     
  47.             /*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/     
  48.             margin: auto;         
  49.             /*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/     
  50.             /*margin-left:15%;        
  51.             margin-right:15%;*/     
  52.         }     
  53.         #footer {     
  54.             background: blue;     
  55.             height: 50px;     
  56.             width: 100%;     
  57.             position: absolute;     
  58.             bottombottom: 0;     
  59.         }     
  60.     </style>     
  61. </head>     
  62. <body>     
  63.     <form id="form1" runat="server">     
  64.         <div>     
  65.             <div id="header">     
  66.                 上       
  67.                 <div id="h_menu">     
  68.                     上_底     
  69.                 </div>                  
  70.             </div>     
  71.             <div id="middle">     
  72.                 <div class="left">     
  73.                     中左     
  74.                 </div>     
  75.                 <div class="right">     
  76.                     中右     
  77.                 </div>     
  78.                 <div class="center">     
  79.                     中间     
  80.                 </div>     
  81.             </div>     
  82.             <div id="footer">     
  83.                 下     
  84.             </div>     
  85.         </div>     
  86.     </form>     
  87. </body>     
  88. </html>     
  89. </p>    
更多精彩内容其他人还在看

CSS伪类对象before和after的用法实例详解

这两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
收藏 0 赞 0 分享

CSS3 实用技巧：实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码，感兴趣的朋友可以看下截图，希望对大家有所帮助
收藏 0 赞 0 分享

IE.JS解决IE兼容性问题方法汇总

正如标题所言它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示，下面为大家介绍下具体针对不同浏览器的调用方法，感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

实现CSS3中的border-radius(边框圆角)示例代码

本文为大家详细介绍下如何实现CSS3中的border-radius(圆角)，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
收藏 0 赞 0 分享

CSS line-height行高上下居中垂直居中样式属性

我们在css编写中需要对大篇幅的内容显示的更好看，有些间隔，不要在挤在一起难看，就可以使用Line-Height属性进行控制
收藏 0 赞 0 分享

CSS Float布局过程与老生常谈的三栏布局

这篇文章就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局
收藏 0 赞 0 分享

邮箱css加载失败怎么办 网站css加载异常原因分析

造成css加载失败的原因有很多，脚本之家也遇到过，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
收藏 0 赞 0 分享

CSS控制样式的三种方式(优先级对比验证)

大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式,这里简单介绍下CSS控制样式的三种方式
收藏 0 赞 0 分享

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content=
收藏 0 赞 0 分享

Discuz7.2 IE9兼容性写法 杜工完全修补方案

因为Discuz7.2在IE9浏览器中有一系列的问题，所有要在以后的开发中考虑到ie9浏览器的一些问题了，这里简单介绍下，需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22