0
Существует эта вертикальная шкала времени, которую я делаю, и ящики должны сидеть по обе стороны от центра. Но коробки с классом timeline-box-right не сидят на правой стороне, хотя у них есть position: absolute;, float:right;, clear:right; и right:0;Почему div с абсолютным положением не сидит справа?
есть ли другой способ, которым я могу иметь их на правой стороне?
.row{
\t clear:both;
\t text-align:center;
\t display:block; \t
\t position: relative;
\t 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 {
\t background-color:#D1F3C7;
\t border: 1px solid #111F8B;
\t }
\t
.timeline-bar:after {
\t content:"";
position: absolute;
top: 80px;
bottom: 0;
left: 50%;
width: 4px;
\t background-color: #5cb82e;
\t opacity: .6;
\t }
\t
.timeline-inner {
\t height: 920px;}
\t
.clearfix::before, .clearfix::after {
content: " ";
display: table;}
\t
.timeline-box {
\t position: absolute;
\t left: 0px;
\t top: 0px;
\t width: 50%;
\t height: 100px;
\t color: #757575;
\t font-size: 16px;
\t line-height: 1.5;
\t margin-bottom: 25px;}
\t
.timeline-box-left {
float: left;
clear: left;
\t border: 1px solid black;
}
.timeline-box-right {
\t position: absolute;
\t float:right;
\t clear:right;
\t right: 0;
\t top: 50px;
\t 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 {
\t margin-right: 40px;
\t background-color:#FFFFFF;
\t padding: 20px 5%;
\t position: relative;
\t border-width: 5px 0 0 0;
\t border-style: solid;}
.arrow {
\t right: -12px;
\t background-position: -18px 0;
\t top: 60px;
\t width: 12px;
\t height: 41px;
\t display: block;
\t position: absolute;}
\t
.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">
\t <div class="timeline-box timeline-box-left">
\t <div class="cd-timeline-img cd-movie">
\t \t \t \t \t \t <i class="fa fa-university" aria-hidden="true"></i>
</div>
<div class="timeline-box-inner">
\t <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">
\t <div class="cd-timeline-img cd-movie">
\t \t \t \t \t \t <i class="fa fa-university" aria-hidden="true"></i>
</div>
<div class="timeline-box-inner">
\t <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>