假設高度已知，左右寬度固定，實現三欄佈局的5種方法

時間 2019-11-06

標籤假設高度已知左右寬度固定實現佈局方法简体版

原文原文鏈接

第一種方法 float

<style>
    *{
        padding:0;
        margin:0;
    }
    .big div{
        height:100px;
    }
    .big .left{
        width:300px;
        float:left;
        background:red;
    }
    .big .right{
        width:300px;
        float:right;
        background:yellow;
    }
    .big .center{
        background:blue;
    }
</style>

<div class="big">
    <div class="left">
       
    </div>
    <div class="right">
      
    </div>
    <div class="center">
        浮動解決方案
    </div>
</div>

第一種解決方案基本上沒有什麼難度，平時應該也會用到不少！bootstrap

第二種方法：absolute

<style>
 .position{
        margin-top:10px;
    }
    .position>div{
        position:absolute;
        height:100px;
    }
    .position .left{
        left:0;
        width:300px;
        background:red;
    }
     .position .right{
        right:0;
        width:300px;
        background:yellow;
    }
    .position .center{
        left:300px;
        right:300px;
        background:blue;
    }
</style>
<div class="position">
    <div class="left">
       
    </div>
    <div class="right">
      
    </div>
    <div class="center">
        絕對定位方案2
    </div>
</div>

第二種方法也是輕鬆實現效果。佈局

第三種方法：flexbox

<style>
 .flex{
        margin-top:120px;
        display:flex;
    }
    .flex>div{
        height:100px;
    }
    .flex .left{
        width:300px;
        background:red;
    }
    .flex .center{
        flex:1;
        background:blue;
    }
    .flex .right{
        width:300px;
        background:yellow;
    }
</style>

<div class="flex">
    <div class="left">
       
    </div>
    <div class="center">
        flex方案
    </div>
    <div class="right">
      
    </div>
</div>

第四種方法：表格佈局

<style>
.table{
        margin-top:10px;
        width:100%;
        display:table;
        height:100px;
    }
    .table>div{
        display:table-cell;
    }
     .table .left{
        width:300px;
        background:red;
    }
    .table .center{
        background:blue;
    }
    .table .right{
        width:300px;
        background:yellow;
    }
</style>


<div class="table">
    <div class="left">
       
    </div>
    <div class="center">
        table方案
    </div>
    <div class="right">
      
    </div>
</div>

table方案一樣實現，只是如今咱們可能已經不多使用表格佈局了。頁面渲染性能也要差一點！性能

第五種方法：網格佈局grid

<style>
  .grid{
        margin-top:10px;
        display:grid;
        width:100%;
        grid-template-rows:100px;
        grid-template-columns: 300px auto 300px;
    }
    .grid .left{
        background:red;
    }
    .grid .center{
        background:blue;
    }
    .grid .right{
        background:yellow;
    }
</style>

<body>
<div class="grid">
    <div class="left">
       
    </div>
    <div class="center">
        grid方案
    </div>
    <div class="right">
      
    </div>
</div>
</body>

網格佈局方法也實現了，CSS3的網格佈局有點相似於bootstrap的柵格化佈局，都是以網格的方式來劃分元素所佔的區塊。flex

問題沒有結束，咱們繼續討論。五種解決方案哪個更好呢？筆者一直認爲技術沒有好壞之分，徹底取決於你用在什麼地方。flexbox

五種方法的優缺點：

浮動：兼容性好，若是對兼容性有明確的要求使用浮動應該知足需求，可是必定要處理好與周邊元素的關係，由於一不注意浮動就可能形成頁面佈局混亂等問題，不過解決浮動帶來的反作用方法也很多這裏咱們不作討論。
絕對定位：簡單直接，可是會使父元素脫離正常文檔流裏面的子元素也會跟着脫離。
flex:目前看來比較完美，不過如今稍微完美一點的技術都存在或多或少的兼容性問題，一樣這個樣式IE8下是不支持的！（IE呀！）
表格佈局：表格佈局雖然沒有什麼大的問題，可是在咱們要細化結構的時候會顯得很繁瑣，同時表格佈局三個單元格的高度會一塊兒變更也不利於咱們進行佈局。
網格佈局：代碼優美簡潔，不過仍是兼容性問題。可是將來是美好的！

相關標籤/搜索

每日一句

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