css如何在div中使多个跨距等宽

CSS技巧有很多种，其中之一是如何在div中使多个跨度等宽。一般情况下，我们使用grid或flex布局来实现这样的效果，但是有时候使用纯CSS就能搞定。

1. 等分宽度

1.1 等分两列

我们可以使用CSS `display: table-cell` 技术，把`div`以及它的后代元素定义成表格单元格之后，就可以使用 `table-layout: fixed` 去控制单元格宽度。

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

.parent { 
  display: table;
  table-layout: fixed;
  width: 100%; 
}
.child { 
  display: table-cell;
  width: 50%;
}

这样，包含两个子元素的父元素就可以被等分成两列了。

1.2 等分三列

如果我们需要把`div`等分成三列，可以去掉 `width` 的固定值，而使用 `calc()` 函数。

.parent { 
  display: table;
  table-layout: fixed;
  width: 100%; 
}
.child { 
  display: table-cell;
  width: calc(100% / 3);
}

这样三列就会等宽了。

2. 等宽边框

2.1 给每个元素增加相同的边框

如果我们需要在`div`中实现多个元素等宽边框，可以使用 `flexbox` 技术。

<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;
  justify-content: space-around;
}
.item {
  padding: 10px;
  border: 1px solid ccc;
  width: 30%;
}

在这个例子中，我们使用了 `justify-content: space-around` 来让元素在容器中等距分布，并使用 `padding` 技术控制了元素的宽度。

2.2 动态设置元素的等宽边框

如果我们需要在`div`中实现的元素的等宽边框是动态的，我们可以使用 CSS `grid` 属性。

<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(auto-fill, minmax(30%, 1fr));
  grid-gap: 20px;
}
.item {
  padding: 10px;
  border: 1px solid ccc;
}

在这个例子中，我们使用 `repeat(auto-fill, minmax(30%, 1fr))` 的方式统计和设置每个元素的宽度，然后使用 `grid-gap` 属性来控制元素之间的间距。

总结

以上就是CSS如何在div中使多个跨距等宽的技巧。当然这里只列举了几种方法，还有其他多种实现方式，需要根据具体情况进行选择。