如何使用CSS

时间：2018-10-09 06:49:11

标签： html css css3

我正在使用CSS创建水平时间轴。我尝试了下面的代码，但没有得到预期的输出。我认为位置或奇数css都有问题。此外，我的代码中出现了水平滚动。

请检查我的代码，并协助我添加错误的CSS。

您能帮我解决这个问题吗？

我的预期输出是 enter image description here 

.i_timeliner ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.i_timeliner li {
  float: left;
  width: 20%;
  position: relative;
  display: inline-block;
  list-style-type: none;
  height: 3px;
  background: #fff;
}

.i_timeliner li:before {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 3px solid #000;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #000;
  letter-spacing: 0px;
}

.i_timeliner li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  top: 25px;
  left: 0%;
  z-index: -1;
}

.i_timeliner_box {
  border: 1px solid #ccc;
  margin: 20px;
  min-height: 140px;
  box-sizing: border-box;
  padding: 0 25px;
}

.i_timeliner ul li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
}

.i_timeliner ul li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.i_timeliner ul li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.i_timeliner ul li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.i_timeliner ul li:nth-child(even) div {
  top: calc(100% + 16px);
}

.i_timeliner ul li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}
<div class="i_timeliner">
  <ul>

    <li>
      <div class="i_timeliner_box">
        <h2>1</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>2</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>3</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>4</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>5</h2>
        <p></p>
      </div>
    </li>
  </ul>

</div>

2 个答案:

答案 0 :(得分：2)

我建议在像这样的复杂情况下使用SCSS或LESS，以方便阅读CSS。我已经使用SCSS（https://jsfiddle.net/e61oqsdz/）编写了此CSS，然后在一些在线站点上将其编译为CSS。

具有说明的SCSS版本： 

$li-height: 50px; // set li height here
$marginRight: 5%; // set margin right - the same unit must be used on $li-width so the width 
                  // will be $marginRight smaller(if using % so 100% can be achieved).

$li-width: 20% - $marginRight;

.i_timeliner{
  width: 100%;
  position:relative;
  display: inline-block;

  ul{
    width: inherit;
    margin:0;
    padding:0;
    list-style:none;
    height: auto;
    font-size:0; // remove the invisible spaces between the `li` elements 

    li{

      position: relative;
      display: inline-block;
      vertical-align:top;
      box-shadow: 0px 0px 1px 2px #000 inset; // add shadow instead of border
      // borders will stack with your width, and even when your elements have 
      // a total of 100% will get pushed on the next row 
      // if you have border on any one of them
      width: $li-width;
      height: $li-height;
      margin-right: $marginRight;

      .i_timeliner_box{
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
        font-size: 0.8rem;

        *{margin:0;}

      }

      &:nth-child(2n){ // here i'm pushing the even numbers from top
        margin-top: $li-height * 1.5; // 1.5 ratio means 'one height + half-of-height' 
        // so we can have the vertical space between blocks
      }

      &:last-child{
        // this is your delimiter, it's an empty li, with overwritten properties
        position: absolute;
        left:0;
        top: $li-height * 1.25; // 1.25 - is the ratio for position to middle. Since we 
        // already have a ratio of 1.5 for even elements, the 0.5 is the space gap, splitting 
        // in half the space gap is 0.25, right where our delimiter should be, 
        // adding a $li-height to it, we get 1.25
        background: red;
        box-shadow: none;
        border:0;
        height: 2px;
        width: 100%;
        margin: 0;
        font-size:0;

      }


    }

  }

}


.i_timeliner {
  width: 100%;
  position: relative;
  display: inline-block;
}

.i_timeliner ul {
  width: inherit;
  margin: 0;
  padding: 0;
  list-style: none;
  height: auto;
  font-size: 0;
}

.i_timeliner ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-shadow: 0px 0px 1px 2px #000 inset;
  width: 15%;
  height: 50px;
  margin-right: 5%;
}

.i_timeliner ul li .i_timeliner_box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}

.i_timeliner ul li .i_timeliner_box * {
  margin: 0;
}

.i_timeliner ul li:nth-child(2n) {
  margin-top: 75px;
}

.i_timeliner ul li:last-child {
  position: absolute;
  left: 0;
  top: 62.5px;
  background: red;
  box-shadow: none;
  border: 0;
  height: 2px;
  width: 100%;
  margin: 0;
  font-size: 0;
}
<div class="i_timeliner">
  <ul>

    <li>
      <div class="i_timeliner_box">
        <h2>1</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>2</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>3</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>4</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>5</h2>
        <p></p>
      </div>
    </li>
    <li></li>
  </ul>

</div>

答案 1 :(得分：1)

1。没有重叠

使用Flexbox布局制作的概念证明

  

Codepen Demo #1

结果

enter image description here

标记 

<ul class="timeline">
  <li>
    <div>
      <time datetime="2018-10-09">October 9, 2018</time>
      <p>description event #1</p>      
    </div>
  </li>
  ...
  <li>
    <div>
      <time datetime="2018-10-09">October 9, 2018</time>
      <p>description event #n</p>      
    </div>
  </li>
</ul>

CSS 

.timeline { 

    /* set a variable for the color */
    --timeline-color: #9bc;

    position: relative;
    list-style: none;
    display: inline-flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    height: 240px; }  /* set here the height of the timeline */


/* middle line */
.timeline:before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    width: 100%;
    height: 2px;
    background: var(--timeline-color); }


.timeline li { 
    margin: 0 20px;
    min-width: 200px;
    align-self: flex-start; }


/*  event in even position are bottom-aligned */
.timeline li:nth-child(2n) { align-self: flex-end;  }


.timeline div {
    position: relative;
    padding: 10px;
    border: 1px var(--timeline-color) solid; }


/* style for the dot over the timeline */
.timeline li:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-left: 100px;
    transform: translate(-50%, -50%);
    border: 1px #9bc solid;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:  var(--timeline-color);      
}


/* style for the event arrow */
.timeline div:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -1px) rotateZ(45deg);
    background: #fff;
}


/* position of the event arrow in odd position */
.timeline li:nth-child(2n - 1) div:before {
    top: 100%;
    margin-top: -8px;
    border-right: 1px var(--timeline-color) solid;
    border-bottom: 1px var(--timeline-color) solid; }


/* position of the event arrow in even position */
.timeline li:nth-child(2n) div:before {
    top: 0;
    margin-top: -10px;
    border-left: 1px var(--timeline-color) solid;
    border-top: 1px var(--timeline-color) solid; }

2。事件部分重叠

如果您需要使框更近并节省一些水平空间，请尝试在列表项（最后一个除外）上设置负数margin-right，例如

.timeline li:not(:last-child) { 
    margin: 0 -50px 0 0;
}
  

Codepen Demo #2

结果

enter image description here

3。悬停时显示详细信息

这是#2的一个简单变体，以防您需要插入比示例中的简单数字更多的文本

  

Codepen Demo #3

enter image description here

相关问题
最新问题