溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS兩列布局和三列布局的用法

發(fā)布時間：2021-03-18 15:00:32 來源：億速云 閱讀：195 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了CSS兩列布局和三列布局的用法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

兩列布局

左列定寬，右列自適應

CSS兩列布局和三列布局的用法

float + margin 布局

html 代碼

<body>
  <div id="left">左列定寬</div>
  <div id="right">右列自適應</div>
</body>

css 代碼：

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  margin-left: 200px; /* 大于或等于左列的寬度 */
  height: 400px;
  background-color: lightgreen;
}

float + overflow 布局

html 代碼

<body>
  <div id="left">左列定寬</div>
  <div id="right">右列自適應</div>
</body>

css 代碼

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

絕對定位布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  position: relative;
}
#left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 400px;
  background-color: lightgreen;
}

table 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  width: 100%;
  height: 400px;
  display: table;
}
#left,
#right {
  display: table-cell;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

flex 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  width: 100%;
  height: 400px;
  display: flex;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 網(wǎng)格布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-columns: 200px auto;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

左列不定寬，右列自適應

左列盒子寬度隨著內(nèi)容增加或減少發(fā)生變化，右列盒子自適應

float + overflow 布局

html 代碼：

<body>
  <div id="left">左列不定寬</div>
  <div id="right">右列自適應</div>
</body>

css 代碼：

#left {
  float: left;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

flex 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  display: flex;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列不定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

三列布局

兩列定寬，一列自適應

CSS兩列布局和三列布局的用法

float + margin 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  margin-left: 300px; /* 左列的寬度 + 中間列的寬度 */
  height: 400px;
  background-color: lightgreen;
}

float + overflow 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

table 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  display: table;
  width: 100%;
  height: 400px;
}
#left {
  display: table-cell;
  width: 100px;
  background-color: lightblue;
}
#center {
  display: table-cell;
  width: 200px;
  background-color: lightgrey;
}
#right {
  display: table-cell;
  background-color: lightgreen;
}

flex 布局

html 代碼：

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼：

#parent {
  display: flex;
  width: 100%;
  height: 400px;
}
#left {
  width: 100px;
  background-color: lightblue;
}
#center {
  width: 200px;
  background-color: lightgrey;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

grid 布局

html 代碼

<body>
  <div id="parent">
    <div id="left">左列定寬</div>
    <div id="center">中間列定寬</div>
    <div id="right">右列自適應</div>
  </div>
</body>

css 代碼

#parent {
  display: grid;
  grid-template-columns: 100px 200px auto;
  width: 100%;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#center {
  background-color: lightgrey;
}
#right {
  background-color: lightgreen;
}

左右定寬，中間自適應

CSS兩列布局和三列布局的用法

圣杯布局和雙飛翼布局目的都是希望先加載的是中間的部分，然后再開始加載 left 和 right 兩部分相對來說不是很重要的東西。

圣杯布局

圣杯布局：為了讓中間的內(nèi)容不被遮擋，將中間 div（或最外層父 div）設置 padding-left 和 padding-right （值等于 left 和 right 的寬度），將左右兩個 div 用相對布局 position: relative 并分別配合 left 和 right 屬性，以便左右兩欄 div 移動后不遮擋中間 div。

html 代碼：

<body>
  <div id="parent">
    <div id="center">中間列</div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 代碼：

#parent {
  height: 400px;
  padding: 0 200px;
  overflow: hidden;
}
#left,
#right {
  float: left;
  width: 200px;
  height: 100%;
  position: relative;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* 使 #left 上去一行 */
  left: -200px;
}
#right {
  right: -200px;
  margin-left: -200px; /* 使 #right 上去一行 */
}
#center {
  float: left;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
}

雙飛翼布局

雙飛翼布局，為了中間 div 內(nèi)容不被遮擋，直接在中間 div 內(nèi)部創(chuàng)建子 div 用于放置內(nèi)容，在該子 div 里用 margin-left 和 margin-right 為左右兩欄 div 留出位置。

html 代碼：

<body>
  <div id="parent">
    <div id="center">
      <div id="center-inside">中間列</div>
    </div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 代碼：

#left,
#right {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* 使 #left 上去一行 */
}
#right {
  margin-left: -200px; /* 使 #right 上去一行 */
}
#center {
  float: left;
  width: 100%;
  height: 400px;
  background-color: lightgrey;
}
#center-inside {
  height: 100%;
  margin: 0 200px;
}

flex 實現(xiàn)

html 代碼：

<body>
  <div id="parent">
    <div id="center">中間列</div>
    <div id="left">左列</div>
    <div id="right">右列</div>
  </div>
</body>

css 代碼：

#parent {
  display: flex;
}
#left,
#right {
  flex: 0 0 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  order: -1; /* 讓 #left 居于左側(cè) */
}
#center {
  flex: 1;
  height: 400px;
  background-color: lightgrey;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS兩列布局和三列布局的用法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

css
AI
助
手