我的响应时间线中奇怪的随机时段/点

Posted 2023-01-23

所以我从codepen复制了这个响应时间线，因为我懒得创建一个完整的响应时间轴。我将其修改为我的网站所需的内容。虽然我想摆脱一个非常讨厌的小问题，但是在该段的最后一行的左栏中有这个句号，它在最后一行的左侧“浮动”。见截图

这与CSS有关吗？您可以运行代码段来亲自查看。

我想摆脱这个烦人的小问题，以便在阅读我的网站时不会让读者感到困惑。

这确实是一个时期。见第二个截图

* 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;


body 
  margin: 0;
  padding: 30px 0;
  font-family: 'Roboto', sans-serif;
  background: #F1F2F6;


h1 
  text-align: center;
  font-weight: 300;
  color: #777


h1 span 
  font-weight: 600;


.container 
  width: 80%;
  padding: 50px 0;
  margin: 50px auto;
  position: relative;
  overflow: hidden;


.container:before 
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background: #CCD1D9;
  z-index: 1


.timeline-block 
  width: -webkit-calc(50% + 8px);
  width: -moz-calc(50% + 8px);
  width: calc(50% + 8px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  justify-content: space-between;
  clear: both;


.timeline-block-right 
  float: right;


.timeline-block-left 
  float: left;
  direction: rtl


.marker 
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #F5F7FA;
  background: #4FC1E9;
  margin-top: 10px;
  z-index: 9999


.timeline-content 
  width: 95%;
  padding: 0 15px;
  color: #666


.timeline-content h3 
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 500


.timeline-content span 
  font-size: 15px;
  color: #a4a4a4;


.timeline-content p 
  font-size: 14px;
  line-height: 1.5em;
  word-spacing: 1px;
  color: #888;


@media screen and (max-width: 768px) 
  .container:before 
    left: 8px;
    width: 2px;
  
  .timeline-block 
    width: 100%;
    margin-bottom: 30px;
  
  .timeline-block-right 
    float: none;
  
  .timeline-block-left 
    float: none;
    direction: ltr;
  

<h1>Pure Css responsive <span>timeline</span></h1>

<div class="container">

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>First Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Seconed Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Third Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Fourth Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Fifth Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>
</div>

答案

脱掉“方向：rtl;”来自timeline-block-left类。并插入“text-align：justify”，如下所示：

.timeline-block-left 
  float: left;
  text-align:justify;

另一答案

在较大的屏幕上“翻转”内容的javascript是添加direction: rtl;这是对该属性的一种不良使用，因为它试图实际创建它所以你从右到左阅读，因此将标点符号放在语义“行尾”。

它应该是：

.timeline-block-left 
    float: left;
    text-align: right;

您需要手动将蓝色圆圈移动到该线上。

另一答案

由于你的direction: rtl;的p属性出现了点 - 你通常应该只使用rtl用于从右到左书写的语言中的文本，并且仅用于它们。

有几种方法可以解决这个问题：

使用text-align

使用text-align属性来对齐您的段落，而不是依赖于direction属性。

将此代码添加到您的CSS中，点将显示在右侧。

.timeline-block-left .timeline-content p 
  text-align: right;
  direction: ltr;


@media screen and (max-width: 768px) 
  .timeline-block-left .timeline-content p 
    text-align: left;
  

* 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;


body 
  margin: 0;
  padding: 30px 0;
  font-family: 'Roboto', sans-serif;
  background: #F1F2F6;


h1 
  text-align: center;
  font-weight: 300;
  color: #777


h1 span 
  font-weight: 600;


.container 
  width: 80%;
  padding: 50px 0;
  margin: 50px auto;
  position: relative;
  overflow: hidden;


.container:before 
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background: #CCD1D9;
  z-index: 1


.timeline-block 
  width: -webkit-calc(50% + 8px);
  width: -moz-calc(50% + 8px);
  width: calc(50% + 8px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  justify-content: space-between;
  clear: both;


.timeline-block-right 
  float: right;


.timeline-block-left 
  float: left;
  direction: rtl;


.marker 
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #F5F7FA;
  background: #4FC1E9;
  margin-top: 10px;
  z-index: 9999


.timeline-content 
  width: 95%;
  padding: 0 15px;
  color: #666


.timeline-content h3 
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 500


.timeline-content span 
  font-size: 15px;
  color: #a4a4a4;


.timeline-content p 
  font-size: 14px;
  line-height: 1.5em;
  word-spacing: 1px;
  color: #888;


.timeline-block-left .timeline-content p 
  text-align: right;
  direction: ltr;


@media screen and (max-width: 768px) 
  .container:before 
    left: 8px;
    width: 2px;
  
  .timeline-block 
    width: 100%;
    margin-bottom: 30px;
  
  .timeline-block-right 
    float: none;
  
  .timeline-block-left 
    float: none;
    direction: ltr;
  
  .timeline-block-left .timeline-content p 
    text-align: left;
  

<h1>Pure Css responsive <span>timeline</span></h1>

<div class="container">

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>First Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Seconed Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Third Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Fourth Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Fifth Year</h3>
      <span>Some work experience</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate.</p>
    </div>
  </div>
</div>

以上是关于我的响应时间线中奇怪的随机时段/点的主要内容，如果未能解决你的问题，请参考以下文章

iOS 中奇怪的元素重叠 (PhoneGap)

使用标准 VS 2010 模板的 chrome 中奇怪的额外填充

Eclipse 中奇怪的后退按钮（Alt-Left）行为

xcode中奇怪的segue动画

翻译过程中奇怪的 MVP 行为

Oracle中奇怪的SQL执行结果[关闭]