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

資訊專欄INFORMATION COLUMN

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

MoAir / 1887人閱讀

摘要：布局結(jié)果依然后前兩種相似，代碼如下。如果你還有好的方法，請一定給我留言哦歡迎光臨小弟博客我的博客原文種方法實現(xiàn)邊欄固定中間自適應(yīng)的欄布局

設(shè)計一個頁面，經(jīng)常會遇到3欄布局，包括左右邊欄和中間主題內(nèi)容，一般情況下都是邊欄固定，中間自適應(yīng)，常用的方法主要有4種：自身浮動、絕對定位，margin負值和flex布局，今天主要一起看一看這種布局的實現(xiàn)，首先來看一看效果：

See the Pen QwRzqL by superlin (@superlin) on CodePen.

基礎(chǔ)樣式我就不說明了，可以看源碼，這里只看重要代碼。

自身浮動

先看html代碼，結(jié)果比較簡單：

html

這種方法比較簡單，左右定寬度分別進行左浮動和右浮動，此時主內(nèi)容列主會自動插入到左右兩列的中間，設(shè)定左右margin為兩邊邊欄的寬度即可：

css.self-float .left{
  float: left;
}
.self-float .right{
  float: right;
}
.self-float .main{
  margin: 0 100px;
}
絕對定位

html代碼結(jié)構(gòu)和前一種方法類似：

html

這種方法比較直觀，容易理解：左右兩欄采用絕對定位，固定于頁面的左右兩側(cè)，主內(nèi)容列用左右margin值撐開距離。

css.absolute-pos {
  position: relative;
}
.absolute-pos .left{
  position: absolute;
  left: 0;
  top: 0;
}
.absolute-pos .right{
  position: absolute;
  right: 0;
  top: 0;
}
.absolute-pos .main{
  margin: 0 100px;
}
margin負值

這種方法就稍微復(fù)雜了一些了，使用的是負的margin值，而且html標簽也增加了，中間的主體要使用雙層標簽，先看代碼。

html

外層div寬度100%顯示，并且浮動，內(nèi)層div為真正的主體內(nèi)容，含有左右100像素的margin值。左欄與右欄都是采用margin負值定位的，左欄左浮動，margin-left為-100%，正好使左欄div定位到了頁面的左側(cè)；右側(cè)欄也是左浮動，其margin-left也是負值，大小為其本身的寬度即100px，這樣正好填補了右邊。

css.margin-negative .main{
  width: 100%;
  float: left;
}
.margin-negative .main .content {
  margin: 0 100px;
}
.margin-negative .left {
  float: left;
  margin-left: -100%;
}
.margin-negative .right {
  float: left;
  margin-left: -100px;
}
flex布局

結(jié)果依然后前兩種相似，代碼如下。

html

這種實現(xiàn)特別簡單，外層div被設(shè)定為伸縮布局，內(nèi)層左右邊欄寬度固定位100像素，而中間內(nèi)容區(qū)main空間分配比例為1，即將剩余空間按1:1全部分配給main，這樣才實現(xiàn)了中間的寬度的自適應(yīng)。

css.flex-container{
  display: -webkit-flex;
  display: flex;
}
.flex-container .main{
  -webkit-flex: 1;
  flex: 1;
}

如果你還有好的方法，請一定給我留言哦

歡迎光臨小弟博客：Superlin"s Blog
我的博客原文：4種方法實現(xiàn)邊欄固定中間自適應(yīng)的3欄布局

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

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

相關(guān)文章

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

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

    EddieChan 評論0 收藏0

  • CSS布局——左定寬度右自適應(yīng)寬度并且等高布局

    摘要：今天有位朋友一早從妙味課堂轉(zhuǎn)來一個有關(guān)于布局的面試題，需要解決，花了點時間寫了幾個放上來與大家分享受。 今天有位朋友一早從妙味課堂轉(zhuǎn)來一個有關(guān)于CSS布局的面試題，需要解決，花了點時間寫了幾個DEMO,放上來與大家分享受。那么我們在看DEMO之前一起先來看看這個面試題的具體要求吧： 左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬；左右兩列，等高布局；左右兩列要求有最小高度，例如：200px;（當(dāng)內(nèi)容超出...

    dreamtecher 評論0 收藏0

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

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

    includecmath 評論0 收藏0

  • 三欄布局的n種實現(xiàn)

    摘要：本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。每一種布局都會有個，個人依然認為文章里帖代碼并沒有來的直接。其中討論了這么多種種布局，有以下理由是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。 本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。至于其他類型，基本上也就是半斤和八兩。每一種布局都會有個Demo，個人依然認為文章里帖代碼并沒有Demo來的直接。...

    aisuhua 評論0 收藏0

  • 三欄布局（一）-------左右寬高固定，中間自適應(yīng)

    摘要：幼圓常見的頁面布局有幼圓左右寬度固定，中間自適應(yīng)幼圓上下高度固定，中間自適應(yīng)幼圓左寬度固定，右自適應(yīng)幼圓上高度固定，下自適應(yīng)，幼圓下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局左右寬高固定，中間自適應(yīng)幼圓有種布局方常見的頁面布局有 1、左右寬度固定，中間自適應(yīng)； 2、上下高度固定，中間自適應(yīng)； 3、左寬度固定，右自適應(yīng)； 4、上高度固定，下自適應(yīng)， 下邊是我看過網(wǎng)上的視頻后寫出來的三欄布局-左右寬...

    Aldous 評論0 收藏0

發(fā)表評論

0條評論

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