CSS div 三等分

在本文中，我们将介绍如何使用CSS将一个div元素平均分为三个部分。

阅读更多：CSS 教程

使用flexbox

最简单的方法是使用flexbox。我们可以将包含这三个元素的父元素设置为“display:flex”，并使用“flex:1”将子元素的宽度设置为平均值。

HTML代码如下：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS样式如下：

.container {
  display: flex;
}

.item {
  flex: 1;
}

这将在页面上创建一个水平布局的容器，并将容器中的三个子元素平均分配在页面上。我们可以通过设置每个子元素的背景颜色来看到分布情况。

.item:first-child {
  background-color: #FF4136;
}

.item:nth-child(2) {
  background-color: #0074D9;
}

.item:last-child {
  background-color: #2ECC40;
}

使用grid布局

另一种方法是使用grid布局。我们可以将包含这三个元素的父元素设置为“display:grid”，并使用“grid-template-columns”将子元素的宽度设置为平均值。

HTML代码如下：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS样式如下：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  background-color: #FF4136;
}

这将在页面上创建一个网格布局的容器，并且将容器中的三个子元素平均分配在页面上。我们可以通过设置每个子元素的背景颜色来看到分布情况。

.item:first-child {
  background-color: #FF4136;
}

.item:nth-child(2) {
  background-color: #0074D9;
}

.item:last-child {
  background-color: #2ECC40;
}

使用float属性

另一种方法是使用float属性。我们可以将每个子元素设置为“float:left”，并设置宽度为平均值。

HTML代码如下：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS样式如下：

.container {
  overflow: hidden;
}

.item {
  width: 33.33%;
  float: left;
  background-color: #FF4136;
}

这将在页面上创建一个水平布局的容器，并将容器中的三个子元素平均分配在页面上。我们可以通过设置每个子元素的背景颜色来看到分布情况。

.item:first-child {
  background-color: #FF4136;
}

.item:nth-child(2) {
  background-color: #0074D9;
}

.item:last-child {
  background-color: #2ECC40;
}