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

2501207950 發布于2019-08-02 13:56 / 3518人閱讀

摘要：五種方法的優缺點浮動兼容性好，如果對兼容性有明確的要求使用浮動應該滿足需求，但是一定要處理好與周邊元素的關系，因為一不注意浮動就可能造成頁面布局混亂等問題，不過解決浮動帶來的副作用方法也不少這里我們不做討論。

第一種方法 float

第一種解決方案基本上沒有什么難度，平時應該也會用到很多！

第二種方法：absolute

第二種方法也是輕松實現效果。

第三種方法：flexbox

第四種方法：表格布局

table方案同樣實現，只是現在我們可能已經很少使用表格布局了。頁面渲染性能也要差一點！

第五種方法：網格布局grid

網格布局方法也實現了，CSS3的網格布局有點類似于bootstrap的柵格化布局，都是以網格的方式來劃分元素所占的區塊。

問題沒有結束，我們繼續討論。五種解決方案哪一個更好呢？筆者一直認為技術沒有好壞之分，完全取決于你用在什么地方。

五種方法的優缺點：

浮動：兼容性好，如果對兼容性有明確的要求使用浮動應該滿足需求，但是一定要處理好與周邊元素的關系，因為一不注意浮動就可能造成頁面布局混亂等問題，不過解決浮動帶來的副作用方法也不少這里我們不做討論。

絕對定位：簡單直接，但是會使父元素脫離正常文檔流里面的子元素也會跟著脫離。

flex:目前看來比較完美，不過現在稍微完美一點的技術都存在或多或少的兼容性問題，同樣這個樣式IE8下是不支持的！（IE呀！）

表格布局：表格布局雖然沒有什么大的問題，但是在我們要細化結構的時候會顯得很繁瑣，同時表格布局三個單元格的高度會一起變動也不利于我們進行布局。

網格布局：代碼優美簡潔，不過還是兼容性問題。但是未來是美好的！

GPU云服務器云服務器三欄布局三種實現方法數據分析方法5種 html5 三欄布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53463.html

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

摘要：五種方法的優缺點浮動兼容性好，如果對兼容性有明確的要求使用浮動應該滿足需求，但是一定要處理好與周邊元素的關系，因為一不注意浮動就可能造成頁面布局混亂等問題，不過解決浮動帶來的副作用方法也不少這里我們不做討論。第一種方法 float *{ padding:0; margin:0; } .big div{ heig...

focusj 2019-08-30 15:54 評論0 收藏0
常見的面試問題：【CSS】已知高度，寫出三欄布局

摘要：問題已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應回答效果示例解決方案浮動絕對定位彈性布局表格布局網格布局。方案二絕對定位將和的都設置脫離文檔流，給的設置左右兩邊距離即左右兩邊盒子的實際寬度。問題：已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 評論0 收藏0
中間自適應布局的5種解法

摘要：前言在做頁面時，我們往往會碰到頁面布局相關的內容，面試時也經常會被問到，那么今天我就來總結一下關于頁面布局的內容。問題如何實現三欄布局高度固定，左中右的結構假設高度已知，請寫出三欄布局，其中左右寬度均為，中間自適應。前言 ??在做頁面時，我們往往會碰到頁面布局相關的內容，面試時也經常會被問到，那么今天我就來總結一下關于頁面布局的內容。問題：如何實現三欄布局（高度固定，左中右的結構）...

keithxiaoy 2019-08-30 15:55 評論0 收藏0