Question

我希望创建一个水平时间轴，避免出现性能价格极高的问题。

假设我们有3个事件，表示为3个div。

<div class="timeline">
<div id="Ev1">
  Event 1
</div>
<div id="Ev2">
  Event 2
</div>
<div id="Ev3">
  Event 3
</div>

现在我希望他们根据水平轴在所需的时间内显示每个，我试图使用margin但确定无效，因为它们未设置为float:left; 问题是我不希望它们向左浮动我希望通过使用margin或left:##px或任何其他可以转换为的方法来控制在水平轴上显示哪个事件时间计算。

所以这是CSS：

body {
  background: #AAA;
}

.timeline {}

.timeline div {
  height: 30px;
}

#Ev1 {
  background: #e10b1f;
  width: 600px;
  margin-left: 231px
}

#Ev2 {
  background: #fb7d29;
  width: 230px;
}

#Ev3 {
  background: #96cf67;
  width: 460px;
}

我知道我可以使用JS来计算我并行的事件数量并根据top修复offset属性等等，但这正是我想要避免的，因为它当我们在时间线上查看数百个事件时，会导致严重的性能损失。

我正在寻找一种优雅的方式来告诉浏览器，如果单行上有足够的空间，则一个接一个地显示DIV，但如果没有，则根据事件时间将它们叠加在一起，各自具有相应的偏移量。

CodePen：http://codepen.io/arthurv/pen/WwbmRr

Answer 1

我不确定我得到了你想做的事。这有用吗？

.timeline div {
    display: inline-block;
}

Answer 2

1。 CSS架构

为您的indidivual事件使用基于百分比的宽度+浮点数：

＆＃13;

body {
    background : #AAA;
}

.timeline {
    width : 100%;
}

.timeline div {
    float : left;
    height : 30px;
}

#Ev1 {
    background : #e10b1f;
    width : 41.51%;
}

#Ev2 {
    background : #fb7d29;
    width : 17.82%;
    margin-left : 5%;
}

#Ev3 {
    background : #96cf67;
    width : 27.66%;
    margin-left : 8%;
}

#Ev4 {
    background : #ffc901;
    width : 17.82%;
}

#Ev5 {
    background : #88aaff;
    width : 67%;
    margin-left : 12%;
}

＆＃13;

<div class="timeline">
    <div id="Ev1">
        Event 1
    </div>
    <div id="Ev2">
        Event 2
    </div>
    <div id="Ev3">
        Event 3
    </div>
    <div id="Ev4">
        Event 4
    </div>
    <div id="Ev5">
        Event 5
    </div>
</div>

＆＃13;

2。生成宽度值

要动态计算#Ev1，#Ev2，#Ev3宽度的实际百分比，您可以使用例如。 PHP，Less或Sass。

例如，如果您使用Sass，则可以使用此代码生成＃1中显示的CSS：

$events : (
    1 : (0, 41.51%, #fb7d29),
    2 : (5%, 17.82%, #fb7d29),
    3 : (8%, 27.66%, #96cf67),
    4 : (0, 17.82%, #ffc901),
    5 : (12%, 67%, #88aaff)
);

@mixin generate-events() {
    @each $key, $value in $events {
        #Ev#{$key} {
            background : nth($value, 3);
            width : nth($value, 2);
            $margin-left :  nth($value, 1);
            @if $margin-left != 0 {
                margin-left : $margin-left;
            }
        }
    }
}

body {
    background : #AAA;
}

.timeline {
    width : 100%;
}

.timeline div {
    float : left;
    height : 30px;
}

@include generate-events();

如果有足够的空间，将DIV堆叠在一行中

2 个答案:

1。 CSS架构

2。生成宽度值