文章/答案/技术大牛

发布

css横向时间轴

CSS横向时间轴基础概念

CSS横向时间轴是一种网页设计元素，用于展示一系列按时间顺序排列的事件或里程碑。这种设计通常用于项目进度、历史记录、产品发布等场景。

类型

简单时间轴：仅展示事件和时间，没有额外的装饰。
带图标时间轴：在每个事件旁边添加图标，增强视觉效果。
带描述时间轴：除了事件和时间，还提供详细的描述信息。
交互式时间轴：用户可以通过点击或滑动查看更多详细信息。

应用场景

项目进度展示：在项目管理页面展示项目的各个阶段和关键节点。
公司历史展示：在企业文化页面展示公司的发展历程。
产品发布记录：在产品页面展示产品的更新和发布历史。

示例代码

以下是一个简单的CSS横向时间轴示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Horizontal Timeline</title>
    <style>
        .timeline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 50px 0;
        }
        .timeline-item {
            position: relative;
            width: 20%;
            text-align: center;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 2px;
            background-color: #000;
        }
        .timeline-item:first-child::before {
            display: none;
        }
        .timeline-item:last-child::before {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="timeline">
        <div class="timeline-item">2020 - Project Start</div>
        <div class="timeline-item">2021 - Milestone 1</div>
        <div class="timeline-item">2022 - Milestone 2</div>
        <div class="timeline-item">2023 - Project Completion</div>
    </div>
</body>
</html>

参考链接

CSS-Tricks: Horizontal Timeline

常见问题及解决方法

时间轴对齐问题：
- 问题：时间轴项没有对齐。
- 原因：可能是由于CSS的flex布局没有正确设置。
- 解决方法：确保.timeline容器使用display: flex，并且子项的宽度设置正确。

时间轴样式不一致：
- 问题：时间轴项的样式不一致。
- 原因：可能是由于CSS选择器没有正确应用。
- 解决方法：检查每个时间轴项的CSS选择器，确保样式一致。
时间轴响应性问题：
- 问题：时间轴在不同屏幕尺寸下显示不一致。
- 原因：可能是由于没有使用响应式设计。
- 解决方法：使用媒体查询（@media）来调整不同屏幕尺寸下的样式。

通过以上方法，可以有效地解决CSS横向时间轴设计中常见的问题。

页面内容是否对你有帮助？

有帮助

没帮助

将vis.js时间线上的页眉修复为页面

jquery、html、css、timeline、vis.js

大的时间轴垂直滚动是痛苦的，所以我们的用户更喜欢他们可以滚动的大HTML页面，然而这当然否定了内置的固定标题。有什么建议，想法，建议吗？

浏览 1提问于2015-12-29得票数 1

2回答

在CSS中强制横向

css、printing

我将CSS文件的大小属性设置为横向，以便在横向中打印页面 margin: 0.1cm; orientation: landscape;有些页面打印为纵向，有些打印为横向。如何使用CSS检测并强制打印横向页面？

浏览 10提问于2016-09-07得票数 7

回答已采纳

1回答

为什么chrome不能在嵌入的twitter时间轴上呈现flexbox定位？

javascript、html、css、twitter、flexbox

有谁能解释一下为什么Chrome (版本78.0.3904.97)不支持flexbox css在网页中居中显示Twitter时间轴？使用Twitter生成的代码将Twitter时间轴嵌入到网页中，我发现在Chrome中尝试将时间轴居中是不可能的。它在Safari中工作得很好。script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></scr

浏览 15提问于2019-11-18得票数 0

2回答

谷歌新闻时间线

javascript、ajax、timeline

我想重现谷歌的新闻时间线。

浏览 1提问于2012-06-13得票数 0

1回答

jQuery时间轴滑块

jquery、slider

有没有一个漂亮的，干净的基于jQuery的时间轴滑块，你会推荐吗？在纯CSS中做这件事容易吗？使用Overflow？

浏览 2提问于2010-08-19得票数 0

回答已采纳

1回答

Screen.width/ $(窗口).width()媒体查询

html、css、media-queries

因此，在移动设备中，媒体查询似乎使用screen.width，它根本不会改变。但是在我的桌面上，当我改变窗口大小时，screen.width保持不变，$(window).width()改变，并且应用了适当的样式表。因此，在桌面浏览器中，媒体查询使用$(window).width()，这让我感到困惑。@media only screen and (max-width: 1050px), only screen and (max-device-width: 1050px){ background-color: lightgray; @med

浏览 1提问于2013-11-27得票数 0

2回答

如何使用Itext 2从html字符串生成Land Scape方向的Pdf

flying-saucer

或者我可以在横向模式下生成PDF，这样我就可以在PDF中显示整个数据。我在下面的网址附上了一张图片。

浏览 4提问于2013-07-08得票数 7

回答已采纳

1回答

还有哪些前端框架可用于facebook应用程序和页面开发？

css、facebook-graph-api

人们是否正在使用其他css框架来应对新的facebook画布大小和时间轴？

浏览 0提问于2012-03-13得票数 2

1回答

为什么在媒体印刷中隐藏横向页面的内容

html、css、print-css

我试图打印纵向和横向页面。我已经设法用下面的css片段获得了横向的页面方向 @page landscape { } 但横向页面中的内容似乎呈现为纵向。可以在这个fiddle中看到我还将正文css标记为 overflow:visible 谁能指导我如何在景观模式下渲染的页面内容，而不是内容被削减。备注:在chrome中检查此内容

浏览 12提问于2020-12-20得票数 0

1回答

GWD手机动画不会停止

javascript、html、mobile、css-animations

我用Google Web Designer制作了一个动画。此动画在桌面上可用，但在移动端不能用。实际上，它是有效的，但当我试图停止动画时，它不会停止。移动浏览器不支持gwd.timeline.stop。.no-animation{ -moz-animation: none !important;} gwd.anim = function(even

浏览 0提问于2016-04-16得票数 0

1回答

媒体查询在chrome和Firefox桌面中工作，但在移动设备中不起作用

javascript、html、css、responsive-design

-- css file --><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" hre

浏览 18提问于2019-11-04得票数 0

回答已采纳

1回答

使用FullPage.js时，当键盘处于活动状态时，iPad CSS会在方向更改时中断

jquery、html、css、viewport、fullpage.js

这可能是元视口问题，也可能是css问题，但我可以用默认的fullPage.js代码()复制类似的问题。如果在幻灯片中添加输入域，在横向模式下打开键盘，然后将方向更改为纵向，则css会中断。结果是，如果你从横向旋转到纵向，你会在侧面看到一个黑色的空间，如果你从纵向旋转到横向，在底部(一旦你隐藏了键盘)。我没有改变css到fullpage框架，所以我不确定问题的根源，但如果你有任何解决办法的想法，请让我知道。

浏览 3提问于2014-08-18得票数 0

2回答

如何在jQuery中正确检测移动设备的方向？

javascript、jquery

我正在写一些jQuery代码，我想要检测移动设备的方向，无论是纵向还是横向。我已经尝试了while语句，但它们不断地向我发送测试警报，但都无济于事。我想要它做的是检测设备是否正在使用横向，如果是的话，改变一些CSS。问题是，当我将设备变成它不能正确检测的场景时，它在检测它时工作正常。如果我在设备处于该方向时刷新页面，它会检测到纵向或横向。我想要发生的是，当我将设备置于横向模式时，它会一直检测到，我希望它将CSS更改为适合横向的CSS，当它返回到纵向时

浏览 1提问于2019-04-12得票数 0

3回答

为什么我的iPhone不能区分960px和640px样式表

iphone、html、css、mobile、responsive-design

我有两条规则：<link rel="stylesheet" media="screen and (max-width:640px)" type="text/

浏览 0提问于2011-11-29得票数 0

回答已采纳

2回答

当iPhone和Android处于横向时，如何限制网页缩放为拉伸？

iphone、android、html、css、mobile-safari

当iPhone和Android处于横向时，如何限制网页缩放为拉伸？当我将iphone旋转到横向时，标题在屏幕上占用了30%的空间，但在纵向模式下只占用了15%的空间。我是否必须为一些横向的元素编写不同的css？

浏览 2提问于2011-04-19得票数 2

回答已采纳

1回答

如何在顶部和向下时间轴vis.js上添加时间轴

javascript、jquery、vis.js

我有超过20人的数据，所以时间轴在底部的时间轴很难看到时，缩放时间线。如何在顶部和向下的时间轴上添加时间轴？

浏览 20提问于2017-02-10得票数 2

回答已采纳

4回答

为什么我的导航栏不能像在肖像中那样在横向滚动？

html、css

我有一个导航栏与一堆样本文本(只是为了测试)，它将滚动时，我有它在纵向模式，但没有横向。mobile-button').on('click touchend', function(event) { $('.mobile-sidenavbar').css+ '%', }); $('.closebtn').on('click touchend', function(

浏览 43提问于2019-05-03得票数 2

1回答

媒体查询，在横向模式下区分桌面和iPad

css、media-queries

我需要区分横向模式下的平板电脑和具有媒体查询功能的台式机的布局。以下是目前的媒体查询：<link href="desktop.css" (orientation:landscape)" rel="styl

浏览 1提问于2011-11-16得票数 7

1回答

如何在不同的手机中定位横向模式

javascript、iphone、mobile、media-queries、samsung-mobile

我正在尝试删除一个javascript事件，只针对处于横向模式的手机。我尝试过使用CSS媒体查询，但没有成功，但我找不到正确的答案。例如，如何涵盖至少在iphone4和三星Galaxy3上检测横向模式的代码？两者都是移动设备，但具有不同的维度。是否有仅针对横向移动设备的媒体查询解决方案？有没有只针对横向移动设备的javascript解决方案？

浏览 0提问于2014-05-21得票数 0

1回答