Question

我是前端开发人员的新手，我使用的是sass。我有自定义时间轴，我需要帮助将位置与年份和时间线标记对齐。而且我想将图像描述放在图像的右侧。

这里是我的jsfiddle

的链接

继承我的 sass代码

$purple: #AF80ED;
        $gray: #f2f2f2;
        $white: #ffffff;
        $timeline-gray: #dddddd;

        .event {
            background: $purple;
            display: table;
            width: 100%;
            margin: 0 auto;
        }

        .event-2 {
            background: $gray;
            display: table;
            width: 100%;
        }

        time {
            /*float: left;
            position: absolute;
            top: 40%;*/
            display: table-cell;
            width: auto;
            text-align: center;
            vertical-align: middle;
            width: 25%;
        }

        .timeline ul li {
          list-style-type: none;
          position: relative;
          width: 6px;
          /*left: 10%;
          margin: 0 auto;*/
          padding: 10px 0 10px 0;
          background: $timeline-gray;

          .content {
            position: relative;
            left: 20px;
            max-width: 700px;
            top: calc(100% / 2 - 10px);

            img{
                border-radius: 50%;
                height: 20px;
                width: 20px;    
            }

          }
        }

        .timeline ul li::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 15px;
          height: 15px;
          border: 4px solid $timeline-gray;
          border-radius: 50%;
          background: $white;
          top: calc(100% / 2 - 10px);
        }

html代码

<section class="timeline">
                  <ul>
                    <div class='event'>
                        <time>1934</time>
                        <li>
                          <div class='content'>
                                <p>
                                Paris
                                </p>

                                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg/240px-Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg" >

                                <p> 
                                    Eiffel Tower
                                </p>

                          </div>
                        </li>
                    </div>
                    <div class='event-2'>
                        <time>1934</time>
                        <li>
                          <div class='content'>
                            <p>
                                asdsadsadsadsad
                            </p>
                          </div>
                        </li>
                    </div>
                  </ul>
                </section>

Answer 1

您的HTML结构错误，您不应直接在div标记内添加ul

ul标记里面必须有li标记，然后你可以把你想要的内容放在里面

我在代码中更改了一些内容，最好在time标记上使用伪元素，而不是在li上使用

See updated jsfiddle

SASS - 垂直中心时间线内容

1 个答案: