在网格中对齐水平边框

Question

我正在使用类似于css魔法网格的东西。我试图在单独的网格项目中对齐水平边框。顶部的图像总是相同的大小。在大多数情况下，单独的边界排列但是因为网格的工作百分比比像素更精细，所以在某些屏幕尺寸下，边框不对齐（请参阅下面的博客文章3）。

我不能只使用<hr>，因为在较小的屏幕尺寸上，网格会压缩到一行，然后压缩到一行。我需要一个不使用javascript的响应式解决方案。我不一定需要一个如何执行此操作的代码示例，而是一种方法。

Answer 1

您可以考虑显示：flex

.container {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.container .item {
  background: green;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
.bb {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid black;
  padding: 10px;
  border-bottom: 1px solid black;
  margin-top: 20px;
  width: 50%;
}

<div class="container">

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

  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="bb">
  <div>
    item1
  </div>
  <div>
    item2
  </div>
  <div>
    item3
  </div>
</div>

希望这有帮助