html+css實作三列布局的4種方式

面試問到一個問題,要設計左右兩邊固定100px，中間自動填充，總長度為100%的一個頁面

剛開始我說用栅格，實踐上确實不行，是以去百度下如何實作，自己去實作了4種方式分别是：BFC塊級布局，flex布局，table布局,css計算寬度布局

由于不懂BFC布局，是以在實作布局的時候走了很多彎路，一直複現失敗，但後調整了html中的div順序解決了問題，直到現在我還是不能了解這個問題，等我看懂了再過來更新吧

直接上代碼：

BFC實作：

<div class= "container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

<style>
/*方法一： BFC(塊級格式化上下文)*/
    .container{
        width:100%;height:400px;border: 1px  red;
    }
    .left{
        width:100px;height:100%;
        background: gray;
        float: left;
    }
    .right{
        width:100px;
        height:100%; 
        float: right; /* bfc子產品觸發 */
        background: green;
    }
    .middle{
        width: auto;
        height: 100%;
        overflow:hidden;  /* bfc子產品觸發，如過取消将出現文字環繞效果 */
        background: red;
    }

</style>
           

Flex實作：

<div class= "container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
<style>
     .container{
        width:100%;height:400px;border:1px solid red;
        display:flex;        
    }
    .left{
        width:100px; height:100%;background:gray;
        flex:none;
    }
    .middle{
        width: auto;
        height: 100%;
        background: red;
        flex:1;
    }
    .right{
        height:100%;
        width: 100px;
        background:green;
        flex:none;        
    }
    
</style>
           

Flex學習：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Table布局格式：

<div class= "container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
<style>
     .container{
        width:100%;height:400px;border:1px solid red;
        display:table;         
    }
    .left{
        width:100px; height:100%;background:gray;
        display:table-cell;
    }
    
    .middle{
        width: auto;
        height: 100%;
        background: red;
        display: table-cell;
    }
    .right{
        width: 100px;
        height:100%;
        background:green;
        display: table-cell;
    }
</style>
           

css樣式計算：

<div class= "container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
    
</div>
<style>
    .container{
        width:100%;height:400px;border:1px solid red;
    }
    .left{
        width:100px;height:100%;background:gray;
        float:left;
    }
    .middle{
        width:calc(100% - 100px);
        height: 100%;
        background: red;
    } 
    .right{
        height:400px;background:green;
        float:right;
        width:100px;
    }
</style>
           

總結：不去參加面試不知道自己到底有多垃圾，積少成多吧，等下次機會到來的時候别再錯過就行了