css布局

兩欄布局

左側(cè)定寬，右側(cè)自適應(yīng)

.left {

? ? width: 200px;

? ? height: 600px;

? ? background: red;

? ? float: left;

? ? text-align: center;

? ? line-height: 600px;

? ? color: #fff;

}

.right {

? ? margin-left: 210px;

? ? height: 600px;

? ? background: yellow;

? ? text-align: center;

? ? line-height: 600px;

}


三欄布局

第一種 浮動(dòng)

當(dāng)寬度小于左右寬度之和時(shí)右側(cè)欄會(huì)掉下去


效果

第二種 flex


不限定middle高度會(huì)隨著right的高度走
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 前言 現(xiàn)在，我們被稱為前端工程師。然而，早年給我們的稱呼卻是頁(yè)面仔。或許是職責(zé)越來(lái)越大，整體的前端井噴式的發(fā)展，使...
    Calvin李閱讀 506評(píng)論 0贊 0
  • 前言 因?yàn)橐趫F(tuán)隊(duì)內(nèi)作一次技術(shù)分享，想了幾個(gè)題目，最后還是決定系統(tǒng)總結(jié)一下我在CSS布局這方面的知識(shí)。一是這個(gè)題目...
    Samhanx閱讀 647評(píng)論 0贊 6
  • 前言 溫馨提示：本文較長(zhǎng)，圖片較多，本來(lái)是想寫(xiě)一篇 CSS 布局方式的，但是奈何 CSS 布局方式種類太多并且實(shí)現(xiàn)...
    sunshine小小倩閱讀 3,164評(píng)論 0贊 59
  • 常見(jiàn)布局（PC） 固定寬度布局——缺點(diǎn)：屏幕尺寸不夠時(shí)會(huì)出現(xiàn)滾動(dòng)條。 彈性布局（布局隨瀏覽器變化）——缺點(diǎn)：代碼復(fù)...
    Joey的企鵝閱讀 282評(píng)論 0贊 1
  • ugpuviyfyc
    5173dfa6933e閱讀 417評(píng)論 0贊 0