圣杯布局------4种css左中右布局方式

来源：互联网发布：法语网络教学视频编辑：程序博客网时间：2024/05/01 00:26

1. float+margin

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        #content{            height:300px;        }        .left{            width: 200px;            height:100%;            float: left;            background-color: #00a0dc;        }        .middle{            height:100%;            margin-left:200px;            margin-right: 300px;            background-color: red;        }        .right{            height:100%;            width: 300px;            float: right;            background-color: #00a0dc;        }    </style></head><body><div id="content">    <div class="left"></div>    <div class="right"></div>    <div class="middle"></div></div></body></html>

注意：中间的middle元素是content的最后一个元素

2. float+absolute

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        #content{            position: relative;            width:100%;            height:300px;        }        .left{            float: left;            width: 200px;            height:100%;            background-color: #00a0dc;        }        .middle{            position: absolute;            top:0;            bottom:0;            left:200px;            right: 300px;            background-color: red;        }        .right{            float: right;            height:100%;            width: 300px;            background-color: #00a0dc;        }    </style></head><body><div id="content">    <div class="left"></div>    <div class="middle"></div>    <div class="right"></div></div></body></html>

3. display:box;box-flex:1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        #content{            height:300px;            display:-webkit-box;        }        .left{            width: 200px;            height:100%;            background-color: #00a0dc;        }        .middle{            min-width:200px;            -webkit-box-flex: 1;            height:100%;            background-color: red;        }        .right{            height:100%;            width: 300px;            background-color: #00a0dc;        }    </style></head><body><div id="content">    <div class="left"></div>    <div class="middle"></div>    <div class="right"></div></div></body></html>

4. display:flex;flex:1

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        #content {            display: flex;            width: 100%;            height: 200px;        }        #left {           flex:0 0 200px;            height: 100%;            background-color: #f04d0d;        }        #middle{            flex: 1;            background-color: blue;        }        #right {            flex:0 0 200px;            height: 100%;            background-color: #f04d0d;        }    </style></head><body><div id="content">    <div id="left"> </div>    <div id="middle"></div>    <div id="right"></div></div></body></html>

阅读全文

0 0