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

Stack DIVs in one line if there is enough room

本文关键字：一行 DIV 空间 请将 如果      更新时间：2023-09-26

我希望创建一个水平时间线并避免一个极端的性能价格问题。

假设我们有 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 来计算我并行有多少事件并根据offset等修复 top 属性，但这正是我试图避免的，因为当我们查看时间线上的数百个事件时，它会导致严重的性能影响。

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

代码笔：http://codepen.io/arthurv/pen/WwbmRr

我不确定我是否理解了您要做的事情。这行得通吗？

.timeline div {
    display: inline-block;
}

1. CSS 架构

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

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%;
}
<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>

2. 生成宽度值

要动态计算#Ev1、#Ev2、#Ev3宽度的实际百分比，可以使用 eg。PHP，少或萨斯。

例如，如果您使用 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();
相关文章：