Question

这是我想要创建的https://codepen.io/paulhbarker/pen/apvGdv所需的时间轴。

让我解释一下我的做法。我正在创建一个“ul”，每个时间行都在该无序列表的“li”里面，类名为“card”。这里，“li”设置为相对位置，“card”设置为绝对位置。然后我选择每个奇怪的“li”并将“卡”转换为左边，并且在“li”的情况下我将“卡”转换为右边。直到这里它正如我期待的那样工作。

我在li中使用“：after”伪选择器并在“bottom：0”位置添加一个圆形针脚点。我正在为li添加一定的宽度，bg颜色和填充以创建一条线。问题是我希望我的卡出现在圆形针点的位置，即“li”的“：after”伪选择器的“bottom：0”。但这些牌都高于精确点。

HTML：

 <section id="timeline">
           <ul>
               <li>
                   <div class="card">
                        <div class="card-heading color--blue">
                            <div class="card-number">
                                <span>01</span>
                            </div>
                            <div class="heading-description">
                                <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                            </p>
                            <img src="http://placehold.it/1000x500" alt="Graphic">
                        </div>
                   </div>
               </li>
               <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
           </ul>
       </section>

CSS：

#timeline{
    margin-top:300px;
}
body{
    background-color: rgb(223, 219, 219);
}

#timeline ul li{
    list-style: none;
    position: relative;
    width: 6px;
    /* padding-top: different for even and off */
    margin: 0 auto;
    background: #fff;
}

#timeline ul li:after{
    content:'';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    bottom:0;
    background: inherit;
    transform: translateX(-40%);
}

.card img{
    width: 100%;
}
.card{
    position: absolute;
    width:370px;
    height:380px;
    bottom:0;
    background-color: #FFFFFF;
    box-sizing: border-box;
    font-family: "Roboto";
}

.card .card-heading{
    box-sizing: border-box;
    width:100%;
    height:80px;
    padding:15px 0px 15px 20px;
    display: flex;
    position: relative;
}

.card .card-heading .card-number{
    background-color: #3A99C2;
    box-sizing: border-box;
    width:55px;
    height:50px;
    color:white;
    font-size:35px;
    font-weight: bold;
    padding:5px 0px 0px 10px;
}

/* Timeline setting for odd element */

#timeline li:nth-child(odd) .card{
    transform: translateX(-120%);
}

#timeline li:nth-child(odd){
    padding-top: 400px;
}

#timeline li:first-child{
    padding-top: 100px;
}
#timeline li:nth-child(odd) .card .card-heading:before{
    content:'';
    position: absolute;
    right:-3%;
    top:34%;
    border-left:14px solid transparent;
    border-left-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   


/* Timeline even */
#timeline li:nth-child(even) .card .card-heading:before{
    content:'';
    position: absolute;
    left:-3%;
    top:34%;
    border-right:14px solid transparent;
    border-right-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   
#timeline li:nth-child(even) .card{
    transform: translateX(20%);
}
#timeline li:nth-child(even){
    padding-top: 100px;
}




.card .card-heading .heading-description{
    color:white;
    display: inline;
    letter-spacing: 2px;
    margin: -20px 0px 0px 10px;
    line-height: 1.5rem;
}

.card .card-body{
    padding:0px 15px 15px 15px;
}
.card .small{
    font-size:17px;
    font-weight: normal;
}

.color--blue{
    background-color: #46B8E9;
    border-color:#46B8E9;
}

Answer 1

所以你需要它成为：之前而不是：之后并且还删除了一些利润。看看我如何更新它

＆＃13;

#timeline{
    margin-top:300px;
}
body{
    background-color: rgb(223, 219, 219);
}

#timeline ul li{
    list-style: none;
    position: relative;
    width: 6px;
    /* padding-top: different for even and off */
    margin: 0 auto;
    background: #fff;
}

#timeline ul li:before{
    content:'';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-top: 30px;
    background: inherit;
    transform: translateX(-40%);
}

.card img{
    width: 100%;
}
.card{
   
    width:370px;
    height:380px;
    bottom:0;
    background-color: #FFFFFF;
    box-sizing: border-box;
    font-family: "Roboto";
}

.card .card-heading{
    box-sizing: border-box;
    width:100%;
    height:80px;
    padding:15px 0px 15px 20px;
    display: flex;
    position: relative;
}

.card .card-heading .card-number{
    background-color: #3A99C2;
    box-sizing: border-box;
    width:55px;
    height:50px;
    color:white;
    font-size:35px;
    font-weight: bold;
    padding:5px 0px 0px 10px;
}

/* Timeline setting for odd element */

#timeline li:nth-child(odd) .card{
    transform: translateX(-120%);
}

#timeline li:nth-child(odd){
    padding-top: 100px;
}

#timeline li:first-child{
    padding-top: 0px;
}
#timeline li:nth-child(odd) .card .card-heading:before{
    content:'';
    position: absolute;
    right:-3%;
    top:34%;
    border-left:14px solid transparent;
    border-left-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   


/* Timeline even */
#timeline li:nth-child(even) .card .card-heading:before{
    content:'';
    position: absolute;
    left:-3%;
    top:34%;
    border-right:14px solid transparent;
    border-right-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   
#timeline li:nth-child(even) .card{
    transform: translateX(20%);
}
#timeline li:nth-child(even){
    padding-top: 100px;
}




.card .card-heading .heading-description{
    color:white;
    display: inline;
    letter-spacing: 2px;
    margin: -20px 0px 0px 10px;
    line-height: 1.5rem;
}

.card .card-body{
    padding:0px 15px 15px 15px;
}
.card .small{
    font-size:17px;
    font-weight: normal;
}

.color--blue{
    background-color: #46B8E9;
    border-color:#46B8E9;
}

＆＃13;

    <section id="timeline">
           <ul>
               <li>
                   <div class="card">
                        <div class="card-heading color--blue">
                            <div class="card-number">
                                <span>01</span>
                            </div>
                            <div class="heading-description">
                                <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                            </p>
                            <img src="http://placehold.it/1000x500" alt="Graphic">
                        </div>
                   </div>
               </li>
               <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
           </ul>
       </section>

＆＃13;

CSS底部：0在创建时间轴时无法正常工作？

1 个答案: