HTML响应网格，中间行下的行

Question

我需要一个布局呈现浮动div的网格，中间行下面有一条水平线。在最后一行下不应该是一行，当然如果只有一行元素，那么下面没有一行。

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

当我拥有相同数量的列而不是变量列时，我知道如何执行此操作。

为清晰起见，这是一幅草图：

我正在使用bootstrap，如果这有所作为..

有什么建议吗？

Answer 1

这可能是一个解决方案（如果你没有背景图片）： 在Flex容器内的单元下添加线，并添加额外的白线以覆盖底部元素的边框。

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

＆＃13;

＆＃13;

.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. */
  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以试试这个，其中＆＃34;黑色＆＃34; for (auto& c : myCells) if (c.valueX > 5) resultCells.push_back(c); 等于您的身体/容器背景颜色。

here