左右寬度固定中間自適應html布局解決方案

Developer 發布于2019-08-29 16:55 / 1901人閱讀

摘要：彈性布局的缺點是兼容性不高，目前瀏覽器無法使用彈性布局網格布局父元素依次為第一個子元素寬第二個自適應第三個網格布局的優點是極為簡便，直接通過父元素樣式決定，缺點是兼容性不高。

a.使用浮動布局
html結構如下


    left
    right
    center
   
//此處注意要先渲染左、右浮動的元素才到中間的元素。元素浮動后剩余兄弟塊級元素會占滿父元素的寬度

b.使用固定定位
html結構如下


    left
    right
     center
 
//和浮動布局同理，先渲染左右元素，使其定位在父元素的左右兩端，剩余的中間元素占滿父元素剩余寬度。

c.表格布局
將父元素display:table，子元素display:table-cell，會將它變為行內塊。
這種布局方式的優點是兼容性好。


  
    left
  
  
    center
  
  
    right

d.彈性布局
父元素display：flex子元素會全部并列在一排。
子元素中flex:n的寬度會將父元素的寬度/n
如flex:1，寬度就等于父元素高度。
彈性布局的缺點是兼容性不高，目前IE瀏覽器無法使用彈性布局


  
    left
  
  
    center
  
  
    right

e.網格布局
父元素display:grid;
grid-templatecolumns:100px auto 100px;
依次為第一個子元素寬100px 第二個自適應第三個100px;
網格布局的優點是極為簡便，直接通過父元素樣式決定，缺點是兼容性不高。


  
    left
  
  
    center
  
  
    right

GPU云服務器云服務器 html的寬度自適應自適應寬度寬度自適應自適應寬度按鈕

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

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

4種方法實現邊欄固定中間自適應的3欄布局

摘要：布局結果依然后前兩種相似，代碼如下。如果你還有好的方法，請一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實現邊欄固定中間自適應的欄布局設計一個頁面，經常會遇到3欄布局，包括左右邊欄和中間主題內容，一般情況下都是邊欄固定，中間自適應，常用的方法主要有4種：自身浮動、絕對定位，margin負值和flex布局，今天主要一起看一看這種布局的實現，首先來看一看效果： See the Pen...

EddieChan 2019-08-28 18:07 評論0 收藏0
4種方法實現邊欄固定中間自適應的3欄布局

摘要：布局結果依然后前兩種相似，代碼如下。如果你還有好的方法，請一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實現邊欄固定中間自適應的欄布局設計一個頁面，經常會遇到3欄布局，包括左右邊欄和中間主題內容，一般情況下都是邊欄固定，中間自適應，常用的方法主要有4種：自身浮動、絕對定位，margin負值和flex布局，今天主要一起看一看這種布局的實現，首先來看一看效果： See the Pen...

MoAir 2019-08-01 14:47 評論0 收藏0
左右兩側寬度固定,中間自適應之【圣杯+雙飛翼】實現

摘要：圣杯左右兩側寬度固定中間自適應一般我們在寫這種三列布局時希望中間主體部分優先渲染因此在中把部分提到和前面。布局定寬設置固定像素自適應設置寬度為固定和位置以上代碼因為的寬度是撐滿了整個頁面后面浮動的掉到了下面可以設置把和位置重排。左右兩側寬度固定,中間自適應這種布局相信很多feers都遇到過,可是有可能你沒有系統的研究過有哪幾種解決方案,本文章立志以淺顯的語言來講解其中一種圣杯解決方案...

loostudy 2019-08-29 12:51 評論0 收藏0
常見的面試問題：【CSS】已知高度，寫出三欄布局

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

MobService 2019-08-02 15:33 評論0 收藏0