Question

我正在制作这个垂直时间轴，并且盒子应该位于中心栏的两侧。但是，如果timeline-box-right，position: absolute;，float:right;和clear:right;

，则right:0;类的框不会位于右侧

我还有其他方法可以将它们放在右侧吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您为div提供了一个timeline-box以及timeline-box-right的类，timeline-box具有left:0px样式。删除此选项可使该框向右移动。

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

1 个答案: