html 元素沿时间轴的均匀间距

Question

我正在尝试构建一个可以缩放的时间轴，并在 'timeline' 旁边添加间隔均匀的标记，以便用户可以在管理面板中添加额外的时间。

例如，如果有 4 个标记，它们将自动分割为时间线的 1/4，而不管宽度如何。

像这样<--|--|--|--|-->

代码如下：

<style>

    body {
        background: black;
    }
#timeline {
    width:49.5%;
    background: url(http://brendonwells.co.uk/CPD/ice-training/img/timeline.png) center center no-repeat;
    background-size: 100%;
    height: 30px;
    position: relative;
}

.checkpoint {
    position: absolute;
    width: 1px;
    height: 13px;
    top: 13px;
    margin-left: auto;
    margin-right: auto;
    background: white;
    cursor: pointer;
}

.checkpoint:hover {
    background: white;
}

.checkpoint p {
    position: absolute;
    height: 30px;
    width:0;
    bottom: -35px!important;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
}

.checkpoint:hover p {
    opacity: 1;
}

</style>

<div id="timeline">
                        <div class="checkpoint" >
                            <div class="rel">
                                <p>5 Minutes</p>
                            </div>
                        </div>

                        <div class="checkpoint" >
                            <p>10 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>15 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>20 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>25 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>30 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>35 Minutes</p>
                        </div>
                    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <script>


        //Set slide times
        var time1 = 300;
        var time2 = 600;
        var time3 = 900;
        var time4 = 1200;
        var time5 = 1500;
        var time6 = 1800;
        var time7 = 2100;

        //Array to keep all the times
        var times = [time1, time2, time3, time4, time5, time6, time7];

        //variable to iterate through all of them
        var chosenTime = 0;

        //placement needs multiplier
        var multiplier = 1;

        function deliverTimes() {
            $('.checkpoint').each(function() {
                $(this).data("time", times[chosenTime]);
                //console.log("The data is " +  $(this).data('time'));
                chosenTime++;
                //console.log('running');
                placement($(this));
            });
        }

        //Call the function
        deliverTimes();

        //Clicking checkpoints
        $('.checkpoint').click(function() {
            video.currentTime = $(this).data("time");
        });

        //place the checkpoints

        function placement($div) {
            var width = $('#timeline').width();

            var margin = ((width/$('.checkpoint').length) - 10) * multiplier;
            console.log(margin);
            $div.css("left", margin + "px");
            multiplier++;
        }
                </script>

http://brendonwells.co.uk/timeline.html

我还准备了一个link，这样CSS就可以乱七八糟了等等。

谢谢

Answer 1

您可以在这里 Responsivegrid.css 使用此系统来均匀 space 它们，否则，您可以使用一个函数将每个检查点的宽度设置为 100% 的百分比.因此，如果您有 5 个检查点，宽度可能是每个 checkpoint/child 的 19%，边距是总宽度的 1%，然后您只需给出 checkpoint:first-child 或 checkpoint:last-child 0% 的利润率（我不确定 class 每个检查点有什么，但你只需将 checkpoint 替换为任何 class）

TLDR：根据 js 函数给每个检查点占整个宽度的百分比。使第一个或最后一个检查点的边距为 0%。

Answer 2

您可以利用 CSS3 flexbox 来处理间距和宽度来实现您想要的外观。添加和删除 html 中的检查点，css 将处理其余部分。不需要 JS。

HTML

<div id="timeline">
    <div class="checkpoint">
        <div class="rel">
            <p>5 Minutes</p>
        </div>
    </div>

    <div class="checkpoint" >
        <p>10 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>15 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>20 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>25 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>30 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>35 Minutes</p>
    </div>
</div>

CSS

body {
  background: #000;
}

#timeline {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  color: #fff;
  height: 30px;
  display: flex;
  position: relative;
}
#timeline::after {
  content: "";
  position: absolute;
  width: 100%;
  border-top: 1px dashed #fff;
  top: 50%;
  left: 0;
}
#timeline .checkpoint {
  flex: 1;
  position: relative;
  height: 50%;
  margin-top: 15px;
  border-right: 1px solid #fff;
}
#timeline .checkpoint:last-child {
  border-right: none;
}
#timeline .checkpoint p {
  width: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transition: all .3s ease;
}
#timeline .checkpoint p:hover {
  opacity: 1;
}

https://jsfiddle.net/s5rL5eja/

html 元素沿时间轴的均匀间距

even spacing of html elements along timeline

html

javascript

css

timeline

spacing