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

資訊專(zhuān)欄INFORMATION COLUMN

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

EddieChan / 3504人閱讀

摘要：布局結(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 QwRzqL by superlin (@superlin) on CodePen.

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

自身浮動(dòng)

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

html

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

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

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

html

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

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ù)值

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

html

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

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

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

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

如果你還有好的方法，請(qǐng)一定給我留言哦

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111035.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...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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