Javascript 仅Css垂直时间线_Javascript_Jquery_Html_Css

Javascript 仅Css垂直时间线

javascript jquery html css

Javascript 仅Css垂直时间线,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在用css制作一个垂直的时间轴，有人能帮我吗。左侧部分变得拥挤。指针的左半部圆与对侧圆重叠。尝试只使用css。是否有任何java脚本可以添加以使其工作代码：无标题文件 .线路{ 宽度：930px；保证金：0自动； } .线路部{ 宽度：408px；背景色：#ffffff；边框：实心1px#B4BBCD；最小高度：35px；文本对齐：对齐；单词包装：打断单词；列表样式：无； } .ci{ 位置：相对位置；浮动：对； } .cl{ 位置：相对位置；文本对齐：右对齐；

我正在用css制作一个垂直的时间轴，有人能帮我吗。左侧部分变得拥挤。指针的左半部圆与对侧圆重叠。尝试只使用css。是否有任何java脚本可以添加以使其工作

代码：


无标题文件
.线路{
宽度：930px；
保证金：0自动；
}
.线路部{
宽度：408px；
背景色：#ffffff；
边框：实心1px#B4BBCD；
最小高度：35px；
文本对齐：对齐；
单词包装：打断单词；
列表样式：无；
}
.ci{
位置：相对位置；
浮动：对；
}
.cl{
位置：相对位置；
文本对齐：右对齐；
}
.ci，.cl span{
填充：10px；
}
.台词：之前{
内容：“；
位置：绝对位置；
排名：0；
左：50%；
}
.ci:before、.cl:after、.ci-span:before、.cl-span:after{
内容：“；
位置：绝对位置；
排名：0；
左：0；
}
.台词：之前{
宽度：3倍；
顶部：-20px；
底部：-20px；
背景：#000；
}
.ci:以前{
宽度：5px；
高度：5px；
边框：3px实心#CCC；
边界半径：100px；
利润率：10px0-38px；
盒影：0 1px 1px rgba（0,0,0.2），插入0 1px 1px rgba（0,0,0.1）；
背景：#000；
}
.ci:悬停：之前{
背景：#090；
}
.ci span:之前{
顶部：12px；
左-6px；
宽度：9px；
高度：9px；
边框宽度：0 1px 1px；
边框样式：实心；
边框颜色：#E5；
背景：#fff；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
}
/*gggggg*/
.cl:之后{
宽度：5px；
高度：5px；
边框：3px实心#CCC；
边界半径：100px；
利润率：10px0445px；
背景：#000；
}
.cl:悬停：之后{
背景：#090；
}
.cl span：之后{
顶部：12px；
左：404px；
宽度：9px；
高度：9px；
边框宽度：1px1p0；
边框样式：实心；
边框颜色：#E5；
背景：#fff；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
}

一
二
一
二
一
二

将

.ci

和

.cl

重新定义为：

.ci{
位置：相对位置；
浮动：对；
清除：对；/*已添加*/
}
.cl{
位置：相对位置；
/*文本对齐：右；*/*已删除*/
浮动：左；/*已添加*/
清除：左侧；/*已添加*/
}

将

行div

和

.cl span:after

更改为：

.line div{
宽度：396px；/*由408px更改*/
背景色：#ffffff；
边框：实心1px#B4BBCD；
最小高度：35px；
文本对齐：对齐；
单词包装：打断单词；
列表样式：无；
}
.台词：之前{
宽度：2px；/*由3px更改*/
顶部：-20px；
底部：-20px；
背景：#000；
}
.cl span：之后{
顶部：12px；
左：392px；/*由404px更改*/
宽度：9px；
高度：9px；
边框宽度：1px1p0；
边框样式：实心；
边框颜色：#E5；
背景：#fff；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
}

更新小提琴：

这就是你想要的吗？

查看我在Github上的示例

它的垂直时间线元素位于两侧（左侧和右侧）

.wrapper{
最大宽度：200px；
右边框：1px纯绿色；
右边填充：10px；
}
.wrapper.element{
位置：相对位置；
宽度：80%；
利润上限：-30px；
填充：20px；
边框：1px纯蓝色；
}
.wrapper.element:before{
位置：绝对位置；
内容：''；
宽度：20px；
顶部：10px；
右图：-15px；
边框顶部：1px纯红；
}
.wrapper.element:第一个子元素{
边际上限：0；
}
.wrapper.element:第n个子元素（2n）{
左缘：110%；
}
.wrapper.element:n子元素（2n）：前{
右：自动；
左：-15px；
}


text texttexttext
text texttexttext
text texttexttext
text texttexttext
text texttexttext
text texttexttext

很长一段时间后回答得很好@奥兹捷克

    <!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type='text/css'>
.line {
    width:930px;
    margin:0 auto;
}
.line div {
    width: 408px;
    background-color:#ffffff;
    border:solid 1px #B4BBCD;
    min-height:35px;
    text-align:justify;
    word-wrap:break-word;
    list-style:none;
}
.ci {
    position:relative;
    float:right;
}
.cl {
    position: relative;
    text-align:right;
}
.ci, .cl span {
    padding:10px;
}
.line:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
}
.ci:before, .cl:after, .ci span:before, .cl span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
.line:before {
    width: 3px;
    top: -20px;
    bottom: -20px;
    background:#000;
}
.ci:before {
    width: 5px;
    height: 5px;
    border: 3px solid #CCC;
    border-radius: 100px;
    margin: 10px 0 0 -38px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
    background: #000;
}
.ci:hover:before {
    background: #090;
}
.ci span:before {
    top: 12px;
    left: -6px;
    width: 9px;
    height: 9px;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #e5e5e5;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
/*gggggg*/
    .cl:after {
    width: 5px;
    height: 5px;
    border: 3px solid #CCC;
    border-radius: 100px;
    margin: 10px 0 0 445px;
    background: #000;
}
.cl:hover:after {
    background: #090;
}
.cl span:after {
    top: 12px;
    left: 404px;
    width: 9px;
    height: 9px;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #e5e5e5;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

</style>
    </head>

    <body style="overflow:hidden;">
    <div class="line">
      <div class="ci"><span>one</span></div>
      <div class="cl"><span>two</span></div>
      <div class="ci"><span>one</span></div>
      <div class="cl"><span>two</span></div>
      <div class="ci"><span>one</span></div>
      <div class="cl"><span>two</span></div>
    </div>
</body>
</html>