左右兩側寬度固定,中間自適應之【圣杯+雙飛翼】實現

loostudy 發布于2019-08-29 12:51 / 2239人閱讀

摘要：圣杯左右兩側寬度固定中間自適應一般我們在寫這種三列布局時希望中間主體部分優先渲染因此在中把部分提到和前面。布局定寬設置固定像素自適應設置寬度為固定和位置以上代碼因為的寬度是撐滿了整個頁面后面浮動的掉到了下面可以設置把和位置重排。

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

圣杯 左右兩側寬度固定,中間自適應preview

一般我們在寫這種三列布局時希望中間主體部分優先渲染,因此在html中把main部分提到left和right前面。

實現

以下代碼實現由淺入深,一點一點實現,希望初學前端的同學或者比較薄弱的同學可以比較容易看懂,如果是對這種布局已經比較熟悉的同學直接看最后的實現代碼吧。

float:left布局,定寬設置固定像素,自適應設置寬度為100%




  
  JS Bin
  


    
        main
        left
        right

margin-left固定left和right位置

以上代碼因為main的寬度是100%撐滿了整個頁面,后面浮動的掉到了下面,可以設置-margin-left把left和right位置重排。設置left的margin-left: -100%,left頂到了container左上,那么right移動到left原來的位置,再將right的margin-left設置為-本身寬度,left和right的位置就定位好了




  
  JS Bin
  


    
        main
        left
        right

relative+padding解決main居中顯示

以上代碼實現有個問題就是main扔充滿整個container被left遮擋,通過設置container的左右padding為left和right留空間,再用relative屬性偏到正確的位置上




  
  JS Bin
  


    
        main
        left
        right

雙飛翼布局

雙飛翼布局和圣杯布局其實很想,只是在解決container 100%遮擋問題上解決不同,雙飛翼使用的是內嵌div設置margin來縮小main內容區寬度

以上圣杯和雙飛翼布局有問題或者哪里說的不對希望大家多多指正。

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

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

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

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

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

includecmath 2019-08-29 12:17 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
CSS布局

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

kviccn 2019-08-30 13:46 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

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

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0