前端常問的面試題，題目：假設高度一定，請寫出三欄布局，左右寬度300px，中間自適應。

看到這里我希望你能停下來思考幾分鐘，

1分鐘~2分鐘~3分鐘~4分鐘~5分鐘！

?

?

好了，那么你想出了幾種答案呢？

下面提供這道題的五種解決方案：

首先要寫好整個頁面的布局（初始化等）

<style>html * {padding: 0;margin: 0;}.layout {margin-top: 20px;}.layout article div {min-height: 100px;} </style>

1.浮動的解決方案

<!-- 浮動布局解決方案 --><section class="layout float"><style>.layout.float .left {float: left;width: 300px;background: red;}.layout.float .right {float: right;width: 300px;background: blue;}.layout.float .center {background: yellow;}</style><article class="left-center-right"><div class="left"></div><div class="right"></div><div class="center"><h1>浮動解決方案</h1><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div></article></section>

2.絕對定位的解決方案

<!-- 絕對定位的解決方案 --><section class="layout absolute"><style>.layout.absolute .left-center-right>div {position: absolute;}.layout.absolute .left {left: 0;width: 300px;background: red;}.layout.absolute .center {left: 300px;right: 300px;background: yellow;}.layout.absolute .right {right: 0;width: 300px;background: blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h1>絕對定位的解決方案</h1><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="right"></div></article></section>

3.flexbox的解決方案

<!-- flexbox解決方案 --><section class="layout flexbox"><style>.layout.flexbox {margin-top: 140px;}.layout.flexbox .left-center-right {display: flex;}.layout.flexbox .left {width: 300px;background: red;}.layout.flexbox .center {flex: 1;background: yellow;}.layout.flexbox .right {width: 300px;background: blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h1>flexbox的解決方案</h1><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="right"></div></article></section>

4.表格布局的解決方案

<!-- 表格布局的解決方案 --><section class="layout table"><style>.layout.table .left-center-right {width: 100%;display: table;height: 100px;}.layout.table .left-center-right>div {display: table-cell;}.layout.table .left {width: 300px;background: red;}.layout.table .center {background: yellow;}.layout.table .right {width: 300px;background: blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h1>表格布局的解決方案</h1><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="right"></div></article></section>

5.網格布局的解決方案

<!-- 網格布局的解決方案 --><section class="layout grid"><style>.layout.grid .left-center-right {display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}.layout.grid .left {background: red;}.layout.grid .center {background: yellow;}.layout.grid .right {background: blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h1>網格布局的解決方案</h1><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="right"></div></article></section>

?

轉載于:https://www.cnblogs.com/goodluck-tang/p/10444480.html

總結

以上是生活随笔為你收集整理的前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。