我的响应时间线中奇怪的随机时段/点
问题描述 投票：1回答：3
所以我从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个回答
2
投票
投票
脱掉“方向：rtl;”来自timeline-block-left类。并插入“text-align：justify”，如下所示：
.timeline-block-left {
float: left;
text-align:justify;
}
0
投票
投票
在较大的屏幕上“翻转”内容的javascript是添加direction: rtl;这是对该属性的一种不良使用，因为它试图实际创建它所以你从右到左阅读，因此将标点符号放在语义“行尾”。
它应该是：
.timeline-block-left {
float: left;
text-align: right;
}
您需要手动将蓝色圆圈移动到该线上。
0
投票
投票
由于你的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>使用‎字符
您可以在从右到左的文本中使用‎（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;
}
}<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>最新问题
- 开发时禁用 MAX_WRITE_OPERATIONS_PER_HOUR
- Azure 自动化，使用 Powershell 7.2 从 Invoke-WebRequest 执行 GET 会返回错误请求 400 错误
- Flutter 可扩展行、可排序、可过滤数据表
- WPF ComboBox 获取突出显示的项目
- 修改 Windows 2016 EC2 Windows 实例上的右上角信息面板
- ASP.NET 端 Datagrid 中数据的动态过滤器
- Azure DevOps 自定义管道任务更新到新版本通过了验证，但实际上失败了，没有任何错误并且未使用更新版本
- 如何断言 cypress 中每页有 10 个项目的 50 页上的项目总数？
- QGraphicsView 使用鼠标滚轮在鼠标位置下放大和缩小
- window.print() 打印空白页
- 无法在 Intellij 下运行 Junit 测试，但可以在 Intellij IDE 中的 maven 下运行
- Rundeck 通过 api 触发作业，无需暴露脚本
- 使用 Azure 用户身份验证的 Node js 应用程序中具有 DefaultAzureCredentials 的应用程序见解
- Pytest：仅运行 linter 检查（pytest-flake8），不运行测试
- Inertiajs onFinish 在 redux 工具包减速器中不起作用
- 更新一个表的列中的值（如果这些值存在于另一个表的列中并且这些值是唯一的）
- Runtime.getRuntime().gc()有副作用吗[重复]
- Blazor：名称“Acti”在当前上下文中不存在
- 有没有一种方法可以使用带有默认字段和__slots__的数据类
- 如何让我的程序休眠 50 毫秒？
© www.soinside.com 2019 - 2024. All rights reserved.