CSS實(shí)現(xiàn)左右兩欄排版的方法

在CSS中，我們可以使用浮動(dòng)（float）或彈性盒子（Flexbox）來實(shí)現(xiàn)左右兩欄排版。

浮動(dòng)（float）

使用浮動(dòng)，我們可以將兩個(gè)元素分別設(shè)置為左右浮動(dòng)，從而實(shí)現(xiàn)左右兩欄排版。

.container {
  width: 100%;
  height: 100%;
}
.left-column {
  float: left;
  width: 50%;
  height: 100%;
  background-color: #f0f0f0;
}
.right-column {
  float: right;
  width: 50%;
  height: 100%;
  background-color: #e0e0e0;
}

在HTML中，我們可以這樣使用：

<div class="container">
  <div class="left-column"></div>
  <div class="right-column"></div>
</div>

彈性盒子（Flexbox）

使用彈性盒子，我們可以將兩個(gè)元素分別設(shè)置為左右彈性盒子，從而實(shí)現(xiàn)左右兩欄排版。

.container {
  display: flex;
  justify-content: space-between;
}
.left-column {
  width: 50%;
  height: 100%;
  background-color: #f0f0f0;
}
.right-column {
  width: 50%;
  height: 100%;
  background-color: #e0e0e0;
}

在HTML中，我們可以這樣使用：

<div class="container">
  <div class="left-column"></div>
  <div class="right-column"></div>
</div>