三列布局

2019年9月8日 131次阅读 来源: liuli93

1、宽度自适应三列布局
　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。(中间是自适应的）
《三列布局》

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:50px;
    background:blue;
}
#main{
    width:100%;
    overflow:hidden;
}
#main .main-left{
    width:25%;
    height:800px;
    background:red;
    float:left;
}
#main .main-center{
    width:50%;
    height:800px;
    background:lightgreen;
    float:left;
}
#main .main-right{
    width:25%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    height:50px;
    background:gray;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
    <div class="main-left">左列</div>
    <div class="main-center">中间</div>
    <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>

2、左右两列固定宽度，中间内容宽度自适应
　　要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>两边固定中间自适应布局</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #herder {
        height: 50px;
        background: blue;
    }
    
    #main {
        width: 100%;
        position: relative;
    }
    
    #main .main-left {
        width: 200px;
        height: 800px;
        background: red;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    #main .main-center {
        height: 800px;
        background: lightgreen;
        margin: 0 310px 0 210px;
    }
    
    #main .main-right {
        width: 300px;
        height: 800px;
        background: pink;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    #footer {
        height: 50px;
        background: gray;
    }
    </style>
</head>

<body>
    <div id="herder">页头</div>
    <div id="main">
        <div class="main-left">左列</div>
        <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>
        <div class="main-right">右列</div>
    </div>
    <div id="footer">页脚</div>
</body>

</html>

《三列布局》

flex 双飞翼 == 布局待我看深入了解之后在加入

    原文作者：liuli93
    原文地址: https://segmentfault.com/a/1190000009022227
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞