国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

左右寬度固定中間自適應(yīng)html布局解決方案

Developer / 1908人閱讀

摘要：彈性布局的缺點(diǎn)是兼容性不高，目前瀏覽器無法使用彈性布局網(wǎng)格布局父元素依次為第一個子元素寬第二個自適應(yīng)第三個網(wǎng)格布局的優(yōu)點(diǎn)是極為簡便，直接通過父元素樣式?jīng)Q定，缺點(diǎn)是兼容性不高。

a.使用浮動布局
html結(jié)構(gòu)如下


    
left

    
right

    
center


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

b.使用固定定位
html結(jié)構(gòu)如下


    
left

    
right

     
center


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

c.表格布局
將父元素display:table，子元素display:table-cell，會將它變?yōu)樾袃?nèi)塊。
這種布局方式的優(yōu)點(diǎn)是兼容性好。


  

    left
  

  

    center
  

  

    right

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


  

    left
  

  

    center
  

  

    right

e.網(wǎng)格布局
父元素display:grid;
grid-templatecolumns:100px auto 100px;
依次為第一個子元素寬100px 第二個自適應(yīng) 第三個100px;
網(wǎng)格布局的優(yōu)點(diǎn)是極為簡便，直接通過父元素樣式?jīng)Q定，缺點(diǎn)是兼容性不高。


  

    left
  

  

    center
  

  

    right

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113979.html

相關(guān)文章

  • 4種方法實現(xiàn)邊欄固定中間自適應(yīng)的3欄布局

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

    EddieChan 評論0 收藏0

  • 4種方法實現(xiàn)邊欄固定中間自適應(yīng)的3欄布局

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

    MoAir 評論0 收藏0

  • 左右兩側(cè)寬度固定,中間自適應(yīng)之【圣杯+雙飛翼】實現(xiàn)

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

    loostudy 評論0 收藏0

  • 常見的面試問題：【CSS】已知高度，寫出三欄布局

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

    MobService 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<