angularjs - 显示多个事件序列，中间可能换行

Question

我是 HTML/CSS 新手。

我需要做这样的事情:

我的网页正在动态接收事件序列，我想在页面中将它们可视化。

我希望将一系列事件放在一个盒子中，其中有很多槽，每个槽都有事件 ID。

所以如果我有几个序列，那么我就会有几个这样的盒子。

但是，序列的长度是动态的。而且网页的窗口可能是由用户调整的，因此即使对于一个序列，如果它太长或窗口太窄，我也必须将框分成几行。

以上是我的设计图。

A , B等是序列标题，然后数字是 ids。

理想情况下，所有事件/序列的空间应尽可能紧凑。

如果一个盒子必须换行，那么它应该是半边框的以表示连续。

我怎样才能做到这一点？使用CSS 3？

而且我使用的框架是AngularJS来控制数据/UI绑定(bind)，即使我设法处理这种情况，如何动态绑定(bind)数据来调整这个需求？

谢谢

Answer 1

在 CSS 中执行此操作很棘手，因为只有当这些元素位于同一行时，您才需要元素之间的边框。 CSS 对包装一无所知。

我已经解决了这个问题:

1. 为所有框添加左边框
2. 仅在最后一个框上添加右边框。
3. 在除第一个框之外的所有框上添加 -1px 左边距。
4. 将盒子放入带有 overflow:hidden 的容器中。

在最后一个框上设置右边框只能解决右侧问题。

-1px 左边距解决了左侧问题。

片段:

.sequences {
  overflow: hidden;
}

.sequence > div {
  border: 1px solid black;
  border-right: none;
  height: 50px;
  float: left;
  margin-bottom: 10px;
}

.sequence > div:last-of-type {
  border-right: 1px solid black;
  margin-right: 20px;
}

.sequence > div:not(:first-of-type) {
  margin-left: -1px;
}

.yellow div {background: yellow;     width: 100px;}
.green div  {background: lightgreen; width: 80px;}
.blue div   {background: lightblue;  width: 120px;}

<div class="sequences">
  <div class="sequence yellow">
    <div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="sequence green">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="sequence blue">
    <div></div><div></div><div></div>
    <div></div><div></div><div></div>
  </div>
</div>