CSS div 三等分

在本文中，我们将介绍如何使用CSS将一个div块分成三等分。这种布局通常应用于网页的导航栏或者脚注栏。

阅读更多：CSS 教程

使用display:flex方法

使用display:flex方法可以轻松地将一个div块分成三等分。flex是一个可以控制子元素的布局方式的CSS属性。

下面是示例代码：

<div class="wrapper">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.wrapper {
  display: flex;
}

.item {
  flex: 1;
}

在这个例子中，wrapper类中的display属性被设置成了flex。它告诉浏览器这个div块中的子元素应该被水平排列。

而class为item的子元素也被赋予了一个flex属性，这个属性告诉浏览器两点：1. 这个元素应该在水平方向上扩展/缩小。2. 扩展/收缩的比例应该和其他class为item的子元素一样。

如此一来，wrapper这个div块就被分成了三等分。

使用float属性

除了display:flex之外，float属性也可以实现同样的效果。下面是示例代码：

<div class="wrapper">
  <div class="item floated">Item 1</div>
  <div class="item floated">Item 2</div>
  <div class="item">Item 3</div>
</div>

.wrapper {
  width: 100%;
}

.item {
  height: 100px;
  background-color: lightblue;
  box-sizing: border-box;
  border: 1px solid #000;
}

.floated {
  float: left;
  width: 33.3333333333%;
}

在这个例子中，class为floated的元素被赋予了float属性，它告诉浏览器这个元素应该浮动到左边。同时，它的宽度也被设置成了33.3333333333%，这就是它变成三等分的关键。

使用grid布局

CSS Grid布局也可以轻松地将一个div块分成三等分。下面是代码示例：

<div class="wrapper">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

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

.item {
  height: 100px;
  background-color: lightblue;
  box-sizing: border-box;
  border: 1px solid #000;
}

在这个例子中，wrapper这个div块被设置成了grid布局。grid-template-columns属性告诉浏览器在水平方向上划分三条等宽的线。每个grid单元可以放置一个class为item的div。