5種三欄佈局的實現方式

時間 2019-12-09

標籤佈局實現方式简体版

原文原文鏈接

<!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%;
}
/* 一、使用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;
}
*/
/* 二、使用左右負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;
}
*/
/* 三、使用左右浮動實現
.left,
.right {
    width: 200px;
    height: 100%;
}
.left {
    float: left;
    background: yellow;
}
.right {
    float: right;
    background: green;
}
.center {
    height: 100%;
    margin: 0 210px;
    background: blue;
} */
/* 四、使用flex實現
.box {
    display: flex;
    width: 100%;
    height: 100%;
}
.center {
    background: blue;
    flex: 1;
}
.left,
.right {
    flex: 0 0 200px;
    background: red;
} 
*/
/* 五、使用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>
<!-- 二、使用左右負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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。