HTML 响应式网格，中间行下方有线

Question

我需要一个布局，显示 float div 网格，中间行下方有一条水平线。最后一行下面不应该有一行，当然如果只有一行元素，下面没有一行..

问题是页面的大小是可变的，我的元素总是有相同的大小，因此列数是相对的。

当我有相同数量的列，但不是可变列时，我知道如何做到这一点。

为了清楚起见，这是一个草图:

如果有区别的话，我正在使用 bootstrap ..

有什么建议吗？

Answer 1

这可能是一个解决方案(如果您没有背景图片): 在 flex 容器内的 units 下添加这条线，并添加一条额外的白线来覆盖底部元素的边框。

本例中的 div 只是容器。任何填充和边距都应该应用于它们内部的元素。我将单位设为灰色，底线为浅粉红色以显示它们，但实际上它们应该分别是透明的和白色的。

.container {
  display: flex; 
  flex-flow: row wrap;
  overflow: hidden;
  position: relative;
}

.container div {
  display: inline-block;
  background-color: #eee;
  width: 140px;
  height: 120px;
  padding: 10px;
  
  border-bottom: 3px solid red;
}

.container::after {
  position: absolute;
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #FFF; /* Make this white. */
  
}

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