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

小诸哥 2022-06-11 13:05:42 0

这篇文章主要介绍了CSS 实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下

1. 使用BFC的原理实现
BFC的规则之一，就是BFC区域，不会与float box重叠，因此我们可以利用这一点来实现3列布局。
html代码如下

XML/HTML Code
<div class="left"></div>  
<div class="right"></div>  
<div class="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
<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="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
<div class="wrapper">  
  <div class="main"></div>  
  <div class="left"></div>  
  <div class="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><!DOCTYPE html>     
<html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">     
<head runat="server">     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
    <title></title>     
    <style type="text/css">     
        body, html {     
            margin: 0px;     
        }     
        #header {     
            background: blue;     
            height: 100px;     
            width: 100%;     
            position: relative; /*父div的位置设置成相对的*/     
            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%;    /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/     
            background: red;     
            float: left;     
            height:100%;     
        }     
        .rightright {     
            width: 15%;  /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/     
            height: 100%;     
            background: pink;     
            float: rightright;     
        }     
        .center {     
            height: 100%;     
            background: green;     
            /*两种方式均可（一）margin(二)margin-left、margin-right*/     
            /*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/     
            margin: auto;         
            /*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/     
            /*margin-left:15%;        
            margin-right:15%;*/     
        }     
        #footer {     
            background: blue;     
            height: 50px;     
            width: 100%;     
            position: absolute;     
            bottombottom: 0;     
        }     
    </style>     
</head>     
<body>     
    <form id="form1" runat="server">     
        <div>     
            <div id="header">     
                上       
                <div id="h_menu">     
                    上_底     
                </div>                  
            </div>     
            <div id="middle">     
                <div class="left">     
                    中左     
                </div>     
                <div class="right">     
                    中右     
                </div>     
                <div class="center">     
                    中间     
                </div>     
            </div>     
            <div id="footer">     
                下     
            </div>     
        </div>     
    </form>     
</body>     
</html>     
</p>    

标签： CSS 实现方法

本文地址： https://www.76339.cn/css/2174.html