为什么绝对位置的 div 不坐在右边？

Question

我正在制作这条垂直时间轴，这些框应该位于居中栏的两侧。但是带有 class timeline-box-right 的框虽然有 position: absolute;、float:right;、clear:right; 和 right:0;[=18，但并不位于右侧=]

有没有其他方法可以让它们在右侧？

.row{
 clear:both;
 text-align:center;
 display:block; 
 position: relative;
 width: 100%;
}

.wrapper {
  clear:both;
  text-align:center;
  margin:0 auto;
  width: 1100px;
  position: relative;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.timeline {
 background-color:#D1F3C7;
 border: 1px solid #111F8B;
 }

 
.timeline-bar:after {
 content:"";
    position: absolute;
    top: 80px;
    bottom: 0;
    left: 50%;
    width: 4px;
 background-color: #5cb82e;
 opacity: .6;
 }
 
.timeline-inner {
 height: 920px;}
 
.clearfix::before, .clearfix::after {
    content: " ";
    display: table;}
 
.timeline-box {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 50%;
 height: 100px;
 color: #757575;
 font-size: 16px;
 line-height: 1.5;
 margin-bottom: 25px;}
 
.timeline-box-left {
    float: left;
    clear: left;
 border: 1px solid black;
}

.timeline-box-right {
 position: absolute;
 float:right;
 clear:right;
 right: 0;
 top: 50px;
 border: 1px solid black;
}

.cd-timeline-img {
  position: absolute;
  top: 65px;
  right: 0;
  margin-right: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #5cb82e;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.timeline-box-inner {
 margin-right: 40px;
 background-color:#FFFFFF;
 padding: 20px 5%;
 position: relative;
 border-width: 5px 0 0 0;
 border-style: solid;}

.arrow {
 right: -12px;
 background-position: -18px 0;
 top: 60px;
 width: 12px;
 height: 41px;
 display: block;
 position: absolute;}
 
.fa-university {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}

.timeline-box-left .timeline-box-inner .arrow::before {
    margin-right: 2px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 10px solid #fff;
}

.timeline-box-left .arrow::before, .timeline-box-right .arrow::before {
    width: 0;
    height: 0;
    content: '';
    display: block;
}

.timeline-box .date {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 15px;
}

.timeline-box h3 {
    color: #414141;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 20px;
}

.timeline-box h4 {
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
}

p {
    margin: 0 0 25px 0;
}

<div class="row">
        <div class="wrapper timeline">
            <div class="timeline-bar"></div>
            <div class="timeline-inner clearfix">
             <div class="timeline-box timeline-box-left">
                 <div class="cd-timeline-img cd-movie">
      <i class="fa fa-university" aria-hidden="true"></i>
                    </div>
                    <div class="timeline-box-inner">
                     <span class="arrow"></span>
                        <div class="date">2014 - 2016</div>
                        <h3> <a href="#"> fyhgdfgfd </a></h3>
                        <h4>kyfhdfgfdgrfds</h4>
                        <p>Lorem ipsum dolor sit amet, te periculis suscipiantur ius. Ei vel nonumy ignota omnesque. Libris aliquam petentium cu pri, ne wisi elitr ignota mea. Ne nostro nominati duo, natum fastidii at nam, mazim dolor deterruisset in vim. Ea pri minim oratio adolescens, probo verear mei te.</p>                  </div>
                </div>
                
                <div class="timeline-box timeline-box-right">
                 <div class="cd-timeline-img cd-movie">
      <i class="fa fa-university" aria-hidden="true"></i>
                    </div>
                    <div class="timeline-box-inner">
                     <span class="arrow"></span>
                        <div class="date">2014 - 2016</div>
                        <h3> <a href="#"> xfgxfdgx </a></h3>
                        <h4>xfsfdsdfgr</h4>
                        <p>Lorem ipsum dolor sit amet, te periculis suscipiantur ius. Ei vel nonumy ignota omnesque. Libris aliquam petentium cu pri, ne wisi elitr ignota mea. Ne nostro nominati duo, natum fastidii at nam, mazim dolor deterruisset in vim. Ea pri minim oratio adolescens, probo verear mei te.</p>                  </div>
                </div>
                  
            </div>
        </div>
    </div>

Answer 1

你给了 div timeline-box 和 timeline-box-right 的 class，并且 timeline-box 有一个 left:0px 风格反对它。删除它可以让盒子向右移动。

为什么绝对位置的 div 不坐在右边？

Why does the div with absolute position do not sit on the right side?

timeline

position

absolute