我的响应时间轴中随机的句点/点很奇怪
所以我从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>
3 个答案:
答案 0 :(得分：2)
起飞“方向：rtl;”来自timeline-block-left类。并像这样插入“ text-align：justify”：
.timeline-block-left {
float: left;
text-align:justify;
}
答案 1 :(得分：0)
在大屏幕上“翻转”内容的javascript正在添加direction: rtl;，这是对该属性的不良使用，因为它实际上是在尝试使它变为 Read Right to Left ，因此将标点符号放在语义的“行尾”。
应该是：
.timeline-block-left {
float: left;
text-align: right;
}
您需要手动将蓝色圆圈移动到直线上。
答案 2 :(得分：0)
由于direction: rtl;的{{1}}属性而导致出现点-通常，您仅应将p用于以从右到左书写的语言编写的文本，并且仅用于它们。
有几种解决方法：
使用rtl
使用text-align属性来对齐段落，而不要依赖text-align属性。
将此代码添加到CSS中，点将显示在右侧。
direction
.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>字符
您可以在从右到左的文本中使用‎（Left-to-right mark）来强制将标点符号显示在右侧。
‎* {
-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;
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？