显示中间可能有行中断的几个事件序列

Question

我是一个HTML / CSS新手。

我需要这样做：

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

我希望一个事件序列在一个盒子里，有很多插槽，每个插槽都有事件id。

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

然而，序列的长度是动态的。而且网页的窗口可能会被用户调整，所以即使是一个序列，如果它太长或者窗口太窄，我不得不把这个框分成几行。

​

​

以上是我的设计图纸。

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

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

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

我怎么能这么做？使用CSS 3？

另外，我使用的框架是AngularJS来控制数据/ UI绑定，即使我设法处理这种情况，如何动态绑定数据以调整这一需求？

谢谢

Answer 1

在CSS中这样做很棘手，因为只有当元素位于同一条线上时，才需要在元素之间设置边框。CSS对包装一无所知。

我通过以下方式解决了问题：

1. 在所有框中添加左边框
2. 仅在最后一个框中添加右边框。
3. 在所有框中添加a -1px左边距，第一个框除外。
4. 将这些箱子放在带有overflow: hidden的容器中。

在最后一个盒子上设置右边框只会解决右手的问题。

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

​

Answer 2

您可以通过这样的操作来使用CSS来解决这个问题。我给了每个序列元素一个顶部，左边和底部的边框。这将给一个正确的边界的错觉，当元素相互浮动，但当他们是最后一条线，它将刹车根据您的要求。

我还在每个部分的最后一个div元素和最后一个div元素中添加了一个右边框。

小提琴

​

div{
    width: 100px; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
    float:left; 
    background: #eee;
    border: 1px solid #000;
    border-width: 1px 0 1px 1px;
    margin-bottom: 10px;
}
div.last{margin-right: 5px;}

div.last,
div:last-child{border-right-width: 1px;}

<div class="seq-1">1</div>
<div class="seq-1">2</div>
<div class="seq-1">3</div>
<div class="seq-1">4</div>
<div class="seq-1 last">5</div>
<div class="seq-2">1</div>
<div class="seq-2">2</div>
<div class="seq-2 last">3</div>

​

编辑：

我刚刚注意到，对于最后一个元素和每个行的第一个元素，边框不是0 0px/空。现在这就有点棘手了。

我并不肯定，使用css解决这个问题有一个很好的解决方案，因为您的序列看起来是动态的。如果我错了，请纠正我，但我认为您需要使用javascript来管理这个问题。

编辑2: CSS与JQuery解决方案

我做了一个快速的jquery解决方案，这是我以前提供的CSS代码。如果左偏移量(在其父元素中)为0，则jQuery脚本移除左边框，如果元素不是每个中的第一个元素，则移除(添加了first类)。

小提琴

​

var containerOffset = $('.container').offset().left;
setBorderWidth();

$(window).resize(function(){
    setBorderWidth();
});

function setBorderWidth(){
    $('.block').each(function() {
        var childOffset = $(this).offset().left;
        
        if(childOffset - containerOffset == 0 && !$(this).hasClass('first'))
            $(this).css("border-left-width", "0px");
        else
             $(this).css("border-left-width", "1px");
        
     });
}

.container{width: 100%;}
.block{
    width: 100px; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
    float:left; 
    background: #eee;
    border: 1px solid #000;
    border-width: 1px 0 1px 1px;
    margin-bottom: 10px;
}
.block.last{margin-right: 5px;}

.block.last,
.block:last-child{border-right-width: 1px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container">
    <div class="seq-1 block first">1</div>
    <div class="seq-1 block">2</div>
    <div class="seq-1 block">3</div>
    <div class="seq-1 block">4</div>
    <div class="seq-1 block last">5</div>
    <div class="seq-2 block first">1</div>
    <div class="seq-2 block">2</div>
    <div class="seq-2 block last">3</div>
</div>

​

Answer 3

我建议有3个CSS类。

1)序列的开头

( 2)序列中间

3)序列结束，然后使用以下方法显示不同的边界：

  .beginning-of-seq {
      border-top-style: solid;
      border-right-style: none;
      border-bottom-style: solid;
      border-left-style: solid;
  }

例如。

关于角度部分，例如，只需使用ng-重复=“seq in序列”，然后用您创建的类呈现序列，这样它就会看起来很好(当然，您需要范围来获得序列)。

<span ng-repeat="seq in sequences">
  <span class="beginning-of-seq"> {{seq.title}} </span>
    <span class="middle-of-seq ng-repeat="elem in seq.otherElements">{{elem}}</span>
 <span class="end-of-seq"> {{seq.lastElem}} </span>
 </span>
</span>

这有点粗糙，我不知道你是如何实现的，但它应该让你知道从哪里开始