中間自適應布局的5種解法

MageekChiu 發布于2019-08-02 14:07 / 452人閱讀

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

前言

??在做頁面時，我們往往會碰到頁面布局相關的內容，面試時也經常會被問到，那么今天我就來總結一下關于頁面布局的內容。

問題：如何實現三欄布局（高度固定，左中右的結構）

??假設高度已知，請寫出三欄布局，其中左右寬度均為300px，中間自適應。

??看了上面的題目，有經驗的人也許會覺得很簡單，仔細想想，如果我們來寫，能寫出幾種方案呢？一般都會想到兩種吧，float和position定位，其實除了這兩種外，還有3種可以寫，下面我就來一一介紹一下：

方案一（float浮動）


         
         
             
             
             我是中間的自適應元素--浮動

原理：左右兩個div由于浮動脫離了文檔流，center就會上移，造成三欄布局的效果（前提是高度相同）

優點：兼容性高

缺點：需要清除浮動來防止影響其他元素

如果高度不固定，中間的內容會被撐開，左右兩邊不會一起撐開

方案二（絕對定位）


         
         
            
            
                我是中間的自適應元素--絕對定位

原理：利用絕對定位以及寬度，將左右兩邊的div固定住，中間div的寬度就會有自適應的效果

優點：快捷

缺點：如果父元素脫離了文檔流，子元素一定會脫離文檔流，運用的場景不多

如果中間元素的高度增加，兩邊元素的高度不會增加，所以只有中間的div會撐開

方案三（flex布局）


         
         
            
            
                我是中間的自適應元素--flex布局

原理：將父元素設置為flex布局，然后中間元素設置flex為1，達到自適應的效果

優點：在實際開發中常用

缺點：IE8及以下的瀏覽器不支持

如果高度不固定，中間內容的高度撐開后，兩邊也會隨之撐開

方案四（table布局）

    
        
        
            
            
                我是中間的自適應元素--table

原理：將父元素設置為table布局，然后每個子元素都是teble-cell，給左右兩個格子設置固定的寬度，中間的格子就可以達到自適應的效果

優點：兼容性好，可做flex布局在ie8以下的代替

缺點：局限性

如果高度不固定，中間被撐開時，左右兩邊也會被撐開，和flex類似

方案五（網格布局）


        
        
            
            
                我是中間的自適應元素--grid布局

原理：將父元素設置為網格布局，然后規定每格的高度以及每格的寬度，只用分別給每格多帶帶設置顏色即可

優點：技術比較新，方便

缺點：兼容性不是很好

如果高度不固定，中間元素添加文本，也不會撐開

GPU云服務器云服務器自適應閾值的流量算法 html的寬度自適應阿里云的播放器自適應播放自適應

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

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

中間自適應布局的5種解法

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

keithxiaoy 2019-08-30 15:55 評論0 收藏0
三列布局（左右固定，中間自適應）

1、定位我是左邊，我是固定的我是中間，我是自適應的，左邊右邊都position固定了，他們脫離了文檔流，我終于得到機會擠進中間啦！只要我margin一下就沒人會擋住我啦！我可真是個小機靈鬼(同時，我還是個自由人，我div寫在開頭中間結尾都可以呢) 我是右邊，我也是固定的 *{ margin:0; padding: 0; } .l...

aboutU 2019-08-29 17:23 評論0 收藏0
三欄布局（一）-------左右寬高固定，中間自適應

摘要：幼圓常見的頁面布局有幼圓左右寬度固定，中間自適應幼圓上下高度固定，中間自適應幼圓左寬度固定，右自適應幼圓上高度固定，下自適應，幼圓下邊是我看過網上的視頻后寫出來的三欄布局左右寬高固定，中間自適應幼圓有種布局方常見的頁面布局有 1、左右寬度固定，中間自適應； 2、上下高度固定，中間自適應； 3、左寬度固定，右自適應； 4、上高度固定，下自適應，下邊是我看過網上的視頻后寫出來的三欄布局-左右寬...

Aldous 2019-04-23 13:08 評論0 收藏0
構建靜態頁面之 [ 布局 ]

摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內塊級元素（text-a...

andot 2019-08-29 16:31 評論0 收藏0
構建靜態頁面之 [ 布局 ]

摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內塊級元素（text-a...

JessYanCoding 2019-08-02 16:31 評論0 收藏0