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

資訊專欄INFORMATION COLUMN

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

loostudy / 2231人閱讀

摘要：圣杯左右兩側(cè)寬度固定中間自適應(yīng)一般我們?cè)趯戇@種三列布局時(shí)希望中間主體部分優(yōu)先渲染因此在中把部分提到和前面。布局定寬設(shè)置固定像素自適應(yīng)設(shè)置寬度為固定和位置以上代碼因?yàn)榈膶挾仁菗螡M了整個(gè)頁(yè)面后面浮動(dòng)的掉到了下面可以設(shè)置把和位置重排。

左右兩側(cè)寬度固定,中間自適應(yīng)這種布局相信很多feers都遇到過(guò),可是有可能你沒有系統(tǒng)的研究過(guò)有哪幾種解決方案,本文章立志以淺顯的語(yǔ)言來(lái)講解其中一種圣杯解決方案。

圣杯 左右兩側(cè)寬度固定,中間自適應(yīng)preview

一般我們?cè)趯戇@種三列布局時(shí)希望中間主體部分優(yōu)先渲染,因此在html中把main部分提到left和right前面。

實(shí)現(xiàn)

以下代碼實(shí)現(xiàn)由淺入深,一點(diǎn)一點(diǎn)實(shí)現(xiàn),希望初學(xué)前端的同學(xué)或者比較薄弱的同學(xué)可以比較容易看懂,如果是對(duì)這種布局已經(jīng)比較熟悉的同學(xué)直接看最后的實(shí)現(xiàn)代碼吧。

float:left布局,定寬設(shè)置固定像素,自適應(yīng)設(shè)置寬度為100% 



  
  JS Bin
  


    

        
main

        
left

        
right

margin-left固定left和right位置

以上代碼因?yàn)閙ain的寬度是100%撐滿了整個(gè)頁(yè)面,后面浮動(dòng)的掉到了下面,可以設(shè)置-margin-left把left和right位置重排。設(shè)置left的margin-left: -100%,left頂?shù)搅薱ontainer左上,那么right移動(dòng)到left原來(lái)的位置,再將right的margin-left設(shè)置為-本身寬度,left和right的位置就定位好了




  
  JS Bin
  


    

        
main

        
left

        
right

relative+padding解決main居中顯示

以上代碼實(shí)現(xiàn)有個(gè)問(wèn)題就是main扔充滿整個(gè)container被left遮擋,通過(guò)設(shè)置container的左右padding為left和right留空間,再用relative屬性偏到正確的位置上




  
  JS Bin
  


    

        
main

        
left

        
right

雙飛翼布局

雙飛翼布局和圣杯布局其實(shí)很想,只是在解決container 100%遮擋問(wèn)題上解決不同,雙飛翼使用的是內(nèi)嵌div設(shè)置margin來(lái)縮小main內(nèi)容區(qū)寬度

以上圣杯和雙飛翼布局有問(wèn)題或者哪里說(shuō)的不對(duì)希望大家多多指正。

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

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

相關(guān)文章

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說(shuō)明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過(guò)設(shè)置的屬性或使用雙飛翼布局避免問(wèn)題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

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

  • CSS 布局經(jīng)典問(wèn)題初步整理

    摘要：布局經(jīng)典問(wèn)題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問(wèn)題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

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

  • CSS布局

    摘要：圣杯布局圣杯布局和雙飛翼布局都是為了解決兩邊定寬，中間自適應(yīng)的三欄布局，中間欄在最前面優(yōu)先渲染，多見于商城類網(wǎng)站布局。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 合理的布局是產(chǎn)品的基礎(chǔ)，可以使人感覺整齊大方，提升用戶體驗(yàn)。掌握幾種常見的布局形式也是前端開發(fā)的基礎(chǔ)，對(duì)于快速實(shí)現(xiàn)頁(yè)面重構(gòu)有很大幫助。 原文鏈接 單列布局 單列布局通常用于網(wǎng)站的首頁(yè)，分為頭部的導(dǎo)航、網(wǎng)頁(yè)內(nèi)容、頁(yè)腳相關(guān)信息。...

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

  • 幾種常見的CSS布局

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

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

  • 幾種常見的CSS布局

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

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

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

0條評(píng)論

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