1

正如您在 JSFiddle 中看到的，我使用了一个时间线布局示例。我添加了过滤器按钮，当我使用它们时，中间的线会被切断。有人可以帮我弄这个吗？

看：

https://jsfiddle.net/tc2axpkf/11/ 单击按钮 TEST 或 GROEP 并看到中间的线被切断。

.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content:" ";
width: 2px;
background: #ffffff;
left: 50%;
margin-left: -1.5px;
}
4

2 回答 2

2

您正在处理需要清除的浮动元素。

 .timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300; 
    overflow:hidden; /* should be enough */
}

查看信息：https ://css-tricks.com/all-about-floats/#article-header-id-4

如果您处于始终知道后续元素将是什么的情况下，则可以应用明确的：两者；重视该元素并开展您的业务。这是理想的，因为它不需要花哨的技巧，也不需要额外的元素，使其具有完美的语义。当然，事情通常不会这样，我们需要在我们的工具箱中拥有更多的浮动清除工具。

在您的情况下，您可以使用：

溢出法

溢出方法依赖于在父元素上设置溢出 CSS 属性。如果此属性在父元素上设置为 auto 或 hidden，则父元素将展开以包含浮动，有效地为后续元素清除它。这种方法可以是精美的语义，因为它可能不需要额外的元素。但是，如果您发现自己添加了一个新的 div 只是为了应用它，它与空 div 方法一样没有语义并且适应性较差。另请记住，溢出属性并非专门用于清除浮点数。注意不要隐藏内容或触发不需要的滚动条。

于 2018-09-08T12:05:48.977 回答
0

正如我所看到的，该.timeline-inverted部分已从 dom 中删除。在此之后，您.timeline会因为浮动元素而崩溃。

尝试添加一个clearfix：

.timeline:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}
于 2018-09-08T12:04:39.417 回答