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

责编:menVScode 6/7/2017, 3:14:45 PM 阅读(620)

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

 两列布局:左侧定宽,右侧自适应 。

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

        方法二:利用外边距 

        方法三:利用position 

        方法四:利用flex布局 

三列布局:左右定款,中间自适应。 

    方法一:使用负外边距 

    方法二:使用绝对定位 

    方法三:使用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>

优点:高大上

缺点:仅支持IE11+

来自: http://www.cnblogs.com/depsi/p/5097013.html

标签: css 自适应 flex
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码