Question

我正在创建一个垂直的CSS时间轴。我左右浮动元素，以便它们与每列叠加。这主要是有效的，但我注意到在一些元素之后出现了一个很大的差距

请查看以下codepen。在第5个元素之后，左侧出现大的间隙，这与之前的间隙不一致，并且在更多元素之后再次出现。造成这种情况的原因是什么？

请注意，生成的HTML是从Angular

生成的

Given /^that I see "([^\"]*)"$/ do |text|
    query("* text:'#{text}'")[0]
end

Answer 1

基本原因是float的工作方式：它不会将项目浮动到高于前一个元素的位置！ See an example.

这是好，因为这意味着当你将一个图像浮动到一个段落旁边时，它就不会一直漂浮到页面顶部但是留在段落旁边，这是你想要的地方！在时间轴的情况下，这意味着所有列表元素实际按顺序显示，沿着页面向下 - 否则一个高项目会导致较小的，后面的项目出现在时间轴的前面 - 这有点违反直觉

为了使时间轴看起来更好，你可以做的是使用javascript或项目生成代码来确定左列或右列是否更短，并将每个项目动态添加到当前最短列而不是简单地左右交替。