【css面試題】三個DIV要求水平對齊，左右兩個DIV寬度固定為100px，中間那個DIV充滿剩余的寬度（至少2種方法）

這是我在一家公司面試時遇到的問題，當時沒有答上來！！

 

所以看到的小伙伴一定要注意了！！

 

變化瀏覽器寬度可看到效果：

左

右

中

 

然后我們來看看代碼：

第一種方法：（浮動）

<style type="text/css">
        .left,.right,.center{
            border:1px solid;
            height:100px;
            text-align: center;
            line-height:100px;
            font-size:50px;
        }
        .left{
            float:left;
            width:100px;
        }
        .right{
            float:right;
            width:100px;
        }
        .center{
            margin:0 100px;
        }
</style>
<div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="center">中</div>
</div>

 

第二種方法：（絕對定位）

<style type="text/css">
        .container{
            position: relative;
        }
        .left,.right,.center{
            position:absolute;/*增加絕對定位*/
            top:0;
            border:1px solid;
            height:100px;
            text-align: center;
            line-height:100px;
            font-size:50px;
        }
        .left{
            left:0;
            width:100px;
        }
        .right{
            right:0;
            width:100px;
        }
        .center{
            width:auto;
            left:100px;
            right:100px;
        }
</style>
<div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="center">中</div>
</div>

 

剛發布不久，就有個小伙伴在下面評論了第三種方法

第三種方法：（fiex）

　　  瀏覽器支持

　　　　

　　　　目前主流瀏覽器不支持 box-flex 屬性。

　　　　Internet Explorer 10 通過私有屬性 the -ms-flex 支持.

　　　　Firefox通過私有屬性 -moz-box-flex 支持.

　　　　Safari和Chrome通過私有屬性 -webkit-box-flex 支持.

　　　　注意： Internet Explorer 9及更早IE版本不支持彈性框.

<style type="text/css">
        .container{
            display:-moz-box; /* Firefox */
            display:-webkit-box; /* Safari and Chrome */
            display:box;
        }
        .left,.right,.center{
            border:1px solid;
            height:100px;
            text-align: center;
            line-height:100px;
            font-size:50px;
        }
        .left{
            width:100px;
        }
        .right{
            width:100px;
        }
        .center{
            -moz-box-flex:1.0; /* Firefox */
            -webkit-box-flex:1.0; /* Safari 和 Chrome */
            box-flex:1.0;
        }
</style>
<div class="container">
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
</div>

 

當然還有很多方法，如果你有什么更好的方法，希望你能在下面評論出來，我們大家一起學習