“大纲”未对齐且股数不均匀

Question

我的问题是我想要带有边框的并排元素，但我注意到如果不进行一些边距破解，则很难使用border属性，而且看起来还是不正确。但是，当我使用outline或box-shadow时，最终会遇到对齐问题。

.inner {
  outline: 1px solid black;
  width: 50%;
  height: 50px;
  float: left;
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  background: #fff;
}

<div class="inner">

</div>
<div class="inner">

</div>
<div class="inner">

</div>
<div class="inner">

</div>
<div class="inner">

</div>

当元素数为偶数时看起来不错，但是当我有最后一个元素时，它看起来很奇怪。有人可能会建议我把它放到最后就可以了，但是有时大小是可以配置的，所以这很常见。

在最后一个元素正确排列边界（或轮廓）的情况下，实现此目标的正确方法是什么？

Answer 1

由于要使用轮廓线创建边框，因此中间的轮廓线实际上彼此重叠。当您到达只有一个div的底部时，轮廓不会重叠，因此看起来未对齐。您可以通过将其构建为表格来解决此问题：

.table {
  width: 100%;
  display: table;
  border-collapse: collapse;
}

.column {
  display: table-row;
}

.inner {
  display: table-cell;
  border: 1px solid black;
  width: 50%;
  height: 50px;
  background: #fff;
}

<div class="table">
  <div class="column">
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
  <div class="column">
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
  <div class="column">
    <div class="inner"></div>
  </div>
</div>