三欄布局的三個(gè)典型方法（圣杯、雙飛翼、flex）

Eric 發(fā)布于2019-08-29 16:20 / 3339人閱讀

摘要：聊聊三欄布局左右定寬，中間自適應(yīng)。效果圖圣杯布局圣杯雙飛翼布局雙飛翼注意一定要在要在中再包裹一個(gè)并設(shè)置它的。布局最重要的還是要理解浮動(dòng)和負(fù)技術(shù)以及。

聊聊三欄布局----左右定寬，中間自適應(yīng)。

效果圖：

圣杯布局




圣杯




  middle
  left
  right

雙飛翼布局




    
    雙飛翼
    


  
    middle 
  
  left
  right

注意：一定要在要在main中再包裹一個(gè)

并設(shè)置它的margin:0 180px 0 200px。

Flex布局




    
    Flex
    



    left
    middle
    right

最重要的還是要理解浮動(dòng)和負(fù)margin技術(shù)以及width:100%。

GPU云服務(wù)器云服務(wù)器圣杯布局三欄布局雙飛翼布局 html5 三欄布局

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

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

相關(guān)文章

三欄布局的三個(gè)典型方法（圣杯、雙飛翼、flex）

摘要：聊聊三欄布局左右定寬，中間自適應(yīng)。效果圖圣杯布局圣杯雙飛翼布局雙飛翼注意一定要在要在中再包裹一個(gè)并設(shè)置它的。布局最重要的還是要理解浮動(dòng)和負(fù)技術(shù)以及。聊聊三欄布局----左右定寬，中間自適應(yīng)。效果圖： showImg(https://segmentfault.com/img/bVbe3Ek?w=1083&h=587); 圣杯布局圣杯 .container{ padd...

OldPanda 2019-08-02 11:11 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：參考文章同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局實(shí)現(xiàn)的效果主要在中，和固定寬度，首先渲染，且自適應(yīng)寬度。 ps: 參考文章 DotHide同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

荊兆峰 2019-08-29 17:13 評論0 收藏0