CSS两列及三列自适应布局方法整理

最新推荐文章于 2020-09-01 09:58:50 发布

codepsi

最新推荐文章于 2020-09-01 09:58:50 发布

阅读量754

点赞数

本文链接：https://blog.csdn.net/a32524150195/article/details/61201525

版权

布局

自适应

两列

三列

在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录：

两列布局：左侧定宽，右侧自适应
三列布局：左右定宽，中间自适应。

两列布局：左侧定宽，右侧自适应

方法一：利用float和负外边距

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        .main,.sitebar{            font: bolder 20px/300px;        }        .main{            width: 100%;            float: left;        }        .main .content{            margin-left: 200px;            background-color: red;        }        .sitebar{            width: 200px;            float: left;            background-color: green;            margin-left: -100%;        }    </style></head><body>    <div class="main">        <div class="content">右侧主体自适应区块</div>    </div>    <div class="sitebar">左侧定宽200px区块</div></body></html>

优点：考虑了页面优化，右侧主内容区先加载，左侧后加载。
缺点：多添加了一层div包裹。

方法二：利用外边距

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        .sitebar{            float: left;            width: 200px;            background-color: green;        }        .content{            background-color: red;            margin-left: 200px;        }    </style></head><body>    <div class="sitebar">左侧定宽200px区块</div>    <div class="content">右侧主体自适应区块</div></body></html>

优点：代码简洁，便于理解
缺点：不利于页面优化，右侧主内容区后加载

方法三：利用position

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        .sitebar{            width: 200px;            background-color: green;        }        .content{            position: absolute;            left: 200px;            right: 0;            top: 0;            background-color: red;        }    </style></head><body>    <div class="content">右侧主体自适应区块</div>    <div class="sitebar">左侧定宽200px区块</div></body></html>

优点：考虑到了页面优化，右侧内容区先加载
缺点：目测没有

上述三种方法兼容IE7以上，但在IE7下不设置高度时，会产生高度错位bug。可通过设置父元素font-size=0，再分别设置子元素font-size解决。

方法四：利用flex布局

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        .main{            display: flex;        }        .content{            flex:1;            background-color: red;        }        .sitebar{            flex:0 0 200px;            order:-1;            background-color: green;        }            </style></head><body><div class="main">    <div class="content">右侧主体自适应区块</div>    <div class="sitebar">左侧定宽200px区块</div></div>    </body></html>

优点：CSS3新布局方式，高大上
缺点：仅支持IE11+。

三列布局：左右定款，中间自适应。

方法一：使用负外边距

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        .main,.left,.right{            height: 300px;            font: 20px/300px;            color: #fff;            text-align: center;        }        .main{            width: 100%;            float: left;        }        .main .content{            margin: 0 300px 0 200px;            background-color: black;        }        .left{            width: 200px;            float: left;            margin-left: -100%;            background-color: red;        }        .right{            width: 300px;            float: left;            margin-left: -300px;            background-color: blue;        }    </style></head><body>    <div class="main">        <div class="content">中间主体区域宽度自适应</div>    </div>    <div class="left">左侧定宽200px</div>    <div class="right">右侧定宽300px</div></body></html>

优点：兼容IE7+，考虑到页面优化，中间内容区先加载
缺点：多一层div嵌套，不易理解

方法二：使用绝对定位

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style>body{    margin:0px;}#left {    background-color: #E8F5FE;    border: 1px solid #A9C9E2;    height: 400px;    width: 100px;    position: absolute;    top: 0px;    left: 0px;}#center {    background-color: #F2FDDB;    border: 1px solid #A5CF3D;    height: 400px;    margin-right: 102px;    margin-left: 102px;}#right {    background-color: #FFE7F4;    border: 1px solid #F9B3D5;    height: 400px;    width: 100px;    position: absolute;    top: 0px;    right: 0px;}</style></head><body>    <div id="center">中列</div>    <div id="left">左列</div>    <div id="right">右列</div></body></html>

优点：代码结构简单，考虑到了页面优化，中间内容去先加载
缺点：目测没有

方法三：使用flex布局

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style>.HolyGrail-body {  display: flex;  flex: 1;}.HolyGrail-content {  flex: 1;  background-color: green;}.HolyGrail-nav, .HolyGrail-ads {  /* 两个边栏的宽度设为12em */  flex: 0 0 200px;  background-color: blue;}.HolyGrail-nav {  /* 导航放到最左边 */  order: -1;  background-color: grey;}</style></head><body>  <div class="HolyGrail-body">    <main class="HolyGrail-content">...</main>    <nav class="HolyGrail-nav">...</nav>    <aside class="HolyGrail-ads">...</aside>  </div></body></html>