5种三栏布局的实现方式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5种三栏布局的实现方式</title>
</head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
html,body {
    width: 100%;
    height: 100%;
}
/* 1、使用absolute实现
.left,
.right {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
}
.left {
    left: 0;
    background: yellow;
}
.right {
    right: 0;
    background: green;
}
.center {
    margin: 0 210px;
    height: 100%;
    background: blue;
}
*/
/* 2、使用左右负margin实现
.center {
    width: 100%;
    height: 100%;
    float: left;
}
.box {
    height: 100%;
    margin: 0 210px;
    background: blue;
}
.left,
.right {
    width: 200px;
    height: 100%;
    float: left;
}
.left {
    margin-left: -100%;
    background: yellow;
}
.right {
    margin-left: -200px;
    background: green;
}
*/
/* 3、使用左右浮动实现
.left,
.right {
    width: 200px;
    height: 100%;
}
.left {
    float: left;
    background: yellow;
}
.right {
    float: right;
    background: green;
}
.center {
    height: 100%;
    margin: 0 210px;
    background: blue;
} */
/* 4、使用flex实现
.box {
    display: flex;
    width: 100%;
    height: 100%;
}
.center {
    background: blue;
    flex: 1;
}
.left,
.right {
    flex: 0 0 200px;
    background: red;
} 
*/
/* 5、使用table实现
.box {
    display: table;
    height: 100%;
    width: 100%;
}
.left,
.center,
.right{
    display: table-cell;
    height: 100%;
}
.left,
.right{
    width: 200px;
    background: blue;
}
.center{
    background: red;
} 
*/
</style>
<body>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<!-- 2、使用左右负margin实现
<div class="center">
    <div class="box"></div>
</div>
<div class="left"></div>
<div class="right"></div>
 -->

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

 

posted on 2017-12-17 15:15  jasonduanmu  阅读(96)  评论(0)  编辑  收藏  举报

导航