我在一个网站上遇到一些对齐问题。基本上这是一个响应性问题
我创建了一个纯CSS垂直时间轴，在该时间轴旁边，有多个段落描述了该时间轴的含义。现在，我面临的问题是垂直对齐所有段落，使其与时间轴的高度相同。
这里是代码
SCSS
.col-md-4 {
@media #{$mq9b} {
display: none;
}
@media #{$mq7b} {
display: none;
}
.timeline {
list-style-type: none;
position: relative;
@media #{$mq7b} {
padding-left: 60px;
position: relative;
left: 50%;
margin-left: -86px;
}
&:before {
content: ' ';
background: $timeline_color;
display: inline-block;
position: absolute;
left: 29px;
width: 3px;
height: 100%;
z-index: 400;
@media #{$mq7b} {
position: absolute;
left: 48px;
}
}
li {
margin: 90px 0;
padding-left: 20px;
position: relative;
@media #{$tablet} {
line-height: 34px;
}
&:before {
content: ' ';
background: $timeline_color;
display: inline-block;
position: absolute;
border-radius: 50%;
left: -36px;
width: 50px;
height: 50px;
z-index: 400;
}
a {
margin-left: 20px;
color: $black;
font: 20px $lato;
position: relative;
top: 8px;
}
i {
position: absolute;
top: 12px;
left: -22px;
z-index: 1000;
color: $black;
font-size: 24px;
}
}
}
}
.col-md-8 {
.paragraph_wrapper {
.timeline_paragraphs {
list-style-type: none;
.only_mobile_disp {
display: none;
h6 {
display: none;
@media #{$mq9b} {
display: block;
font-size: 30px;
text-align: center;
border-bottom: 1px solid #dedede;
padding-bottom: 10px
}
@media #{$mq7b} {
display: block;
font-size: 20px;
text-align: center;
border-bottom: 1px solid #dedede;
padding-bottom: 10px
}
.disp_mobile {
opacity: 0;
@media #{$mq9b} {
opacity: 1;
padding-right: 20px;
position: relative;
font-size: 16px;
padding-top: 10px;
}
@media #{$mq7b} {
// opacity: 1;
padding-right: 20px;
position: relative;
font-size: 16px;
padding-top: 10px;
}
&:before {
position: relative;
z-index: 1;
}
&:after {
position: absolute;
top: 4px;
left: 50%;
width: 30px;
height: 30px;
background-color: $timeline_color;
content: "";
margin-left: -25px;
@include border-radius(50%);
}
}
}
}
li {
margin: 90px 0;
}
}
}
}
HTML
<div class="col-md-4 col-sm-6 wow fadeInLeft" data-wow-delay="0.1s">
<ul class="timeline">
<li> <a href="#" class="float-right">2019</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">2018</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">2016</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">2014</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">2012</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">2010</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">2002</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">1992</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
<li> <a href="#" class="float-right">1973</a> <i class="fa fa-calendar" aria-hidden="true"></i></li>
</ul>
</div>
<div class="col-md-8 col-sm-12 col-xs-12 wow fadeInRight" data-wow-delay="0.2s">
<div class="paragraph_wrapper">
<ul class="timeline_paragraphs">
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2019</h6>
</li>
<li>
Handed Over BANERGATTA CENTRAL, A Part of PRIMCO SPECTRUM.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2018</h6>
</li>
<li>
The Pavilion Residential Project Handed Over, Union City a mixed Development project launched.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2016</h6>
</li>
<li>
1.3 million sft of Workspace, Retail AND Hospitality ongoing and projected to complete Q1 2017. Handover of ‘FIESTA HOMES’ and 5 Ongoing Projects.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2014</h6>
</li>
<li>
2 million stf of new commercial & retail projects completed.Handover of ' watermark ' & ' crystal cove ' commenced.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2012</h6>
</li>
<li>
3 commercial projects completed. 5 residential projects launched.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2010</h6>
</li>
<li>
SJR Primecorp is incorporated.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>2002</h6>
</li>
<li>
Commercial, Residential development begins under the new SJR identity.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>1992</h6>
</li>
<li>
First Commercial Project. SJR Towers for Infosys.
</li>
<li class="only_mobile_disp">
<h6><i class="fa fa-calendar disp_mobile" aria-hidden="true"></i>1973</h6>
</li>
<li>
Founded by S Jayarama reddy. Begins with Infrastructure ‐ Airport Tarmacs, Flyover, Higways and Factories.
</li>
</ul>
</div>
</div>