三栏布局

2018-03-24

css

css, source

三栏布局

1. 流体布局

<!DOCTYPE html>
<html lang='en'>
<head>
    <style>
        .left{
            float:left;
            width:100px;
            height:200PX;
            background-color:red;
        }
        .right{
            float:rigth;
            width:200px;
            height:200px;
            background-color:blue;
        }
        .main{
            margin-right:120px;
            margin-left:220px;
            height:200px;
            background-color:green;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"><div>
    </div>
</body>
</html>

2. BFC 三栏布局

BFC规则有这样的描述：BFC区域，不会与浮动元素重叠，利用这一点实现。

Block formatting context (BFC)块级格式化上下文,bfc三栏布局的主体部分会后加载

<!DOCTYPE html>
<html lang = "en">
<head>
    <style>
        .left{
           float:left;
           width:100px;
           height:200px;
           margin-right:20px;
           background-color:red;
        }
        
        .right{
            float:right;
            width:200px;
            height:200px;
            margin-left:20px;
            background-color:blue;
        }
        .main{
            height:200px;
            overflow:hidden;
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="container"> 
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

3. 双飞翼布局

<!DOCTYPE html>
<html>
<head>
    <style>
        .content{
            float:left;
            width:100%;
        }
        .main{
            height:200px;
            margin-left:110px;
            margin-right:220px;
            background-color:green;
        }
        //清除浮动
        .main::after{
            display:block;
            content:"";
            clear:both;
            font-size:0;
            height:0;
            zoom:1;
        }
        .left{
            float:left;
            height:200px;
            width:100px;
            margin-left:-100%;
            background-color:red;
        }
        .right{
            width:200px;
            height:200px;
            float:right;
            margin-left:-200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

利用的是浮动元素 margin 负值的应用，感兴趣的同学可以上网搜搜原理。

主体内容可以优先加载，HTML 代码结构稍微复杂点。

4. 圣杯布局

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
	.container {
	    margin-left: 120px;
	    margin-right: 220px;
	}
	.main {
	    float: left;
	    width: 100%;
	    height: 300px;
	    background-color: red;
	}
	.left {
	    float: left;
	    width: 100px;
	    height: 300px;
	    margin-left: -100%;
	    position: relative;
	    left: -120px;
	    background-color: blue;
	}
	.right {
	    float: left;
	    width: 200px;
	    height: 300px;
	    margin-left: -200px;
	    position: relative;
	    right: -220px;
	    background-color: green;
	}
    </style>
</head>
<body>
    <div class="container">
    	<div class="main"></div>
    	<div class="left"></div>
    	<div class="right"></div>
    </div>
</body>
</html>

5.Flex 布局

flex属性；主体设置flex-grow:1;占的份数，加上order:-1值越小越靠前排

简单实用，未来的趋势，需要考虑浏览器的兼容性。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
	.container {
            display: flex;
	}
	.main {
        flex-grow: 1;
	    height: 300px;
	    background-color: red;
	}
	.left {
	    order: -1;
	    flex: 0 1 200px;
	    margin-right: 20px;
	    height: 300px;
	    background-color: blue;
	}
	.right {
	    flex: 0 1 100px;
            margin-left: 20px;
	    height: 300px;
	    background-color: green;
	}
    </style>
</head>
<body>
    <div class="container">
    	<div class="main"></div>
    	<div class="left"></div>
    	<div class="right"></div>
    </div>
</body>
</html>

6. Table 布局

父级设置display:table属性，内部元素设置display:table-cell，按照位置从左到右排列。

缺点：无法设置栏间距

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
	    display: table;
	    width: 100%;
        }
        .left, .main, .right {
	    display: table-cell;
        }
        .left {
	    width: 200px;
	    height: 300px;
	    background-color: red;
        }
        .main {
	    background-color: blue;
        }
        .right {
	    width: 100px;
	    height: 300px;
	    background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
    	<div class="left"></div>
    	<div class="main"></div>
    	<div class="right"></div>
    </div>
</body>
</html>

绝对定位三栏布局

采用了父级绝对定位，主题内容给个左右固定值得margin，左右采用相对定位，给固定宽度。

特点：简单实用，并且主要内容可以优先加载。


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
	.container {
	    position: relative;
	}
	.main {
	    height: 400px;
	    margin: 0 120px;
	    background-color: green;
	}
	.left {
	    position: absolute;
	    width: 100px;
	    height: 300px;
	    left: 0;
	    top: 0;
	    background-color: red;
	}
	.right {
	    position: absolute;
	    width: 100px;
	    height: 300px;
	    background-color: blue;
            right: 0;
	    top: 0;
	}
    </style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
	    <div class="left"></div>
	    <div class="right"></div>
    </div>
</body>
</html>