成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Developer / 1911人閱讀

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

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


    
left

    
right

    
center


   
//此處注意要先渲染左、右浮動(dòng)的元素才到中間的元素。元素浮動(dòng)后剩余兄弟塊級(jí)元素會(huì)占滿父元素的寬度

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


    
left

    
right

     
center


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

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


  

    left
  

  

    center
  

  

    right

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


  

    left
  

  

    center
  

  

    right

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


  

    left
  

  

    center
  

  

    right

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113979.html

相關(guān)文章

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

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

    EddieChan 評(píng)論0 收藏0

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

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

    MoAir 評(píng)論0 收藏0

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

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

    loostudy 評(píng)論0 收藏0

  • 常見(jiàn)的面試問(wèn)題：【CSS】已知高度，寫出三欄布局

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

    MobService 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<