Question

实际上我得到了2个圆圈和线条，它重叠了。我希望在行的开头和结尾处都有圆圈。

请你帮我把线圈放在一起。

HTML：

<div class="time-slice row">
  <div class="date-time">
    <p class="date">Fri 28 Aug</p>
    <p class="time">10:00</p>
  </div>
  <div class="circle-wrap">
    <div class="circle"></div>
  </div>
  <div class="point-title">
    <span>
      <b>Kiev Borispol (KBP)</b>
    </span>
  </div>
</div>

<div class="time-slice row">
  <div class="date-time">
    <p class="date">Fri 28 Aug</p>
    <p class="time">10:00</p>
  </div>
  <div class="circle-wrap">
    <div class="circle"></div>
  </div>
  <div class="point-title">
    <span>
      <b>Amsterdam (AMS)</b>
    </span>
  </div>
</div>

CSS：

.time-slice {
  display: flex;
  align-items: stretch;
  margin-left:20px;
  > * {
    padding: 20px;
  }
}

.circle {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: #29a8bb;
  background: #ffffff;
  border-radius: 32px;
  display: block;
  border: 2px solid blue;
}

.circle-wrap {
  position: absolute;
  > .circle {
    position: relative;
    left: -30px;
  }
}

.date-time {
  flex-shrink: 0;
  flex-basis: 100px;
}

.date,
.time {
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 10px;  
}

.point-title {
  border-left: 2px solid blue;
}

感谢您的帮助！

Answer 1

您可以使用:not()选择器在最后一个圆圈后不画线。

.time-slice.row:not(:last-child)  .point-title

http://codepen.io/anon/pen/OyJqMW

Answer 2

您可以为position: relative设置.time-slice，为top设置left + .circle-wrap，然后添加一些边距，填充。

演示：http://codepen.io/robinhuy/pen/OyJdGX

Answer 3

这里你从codepen中复制较少的CSS。我只是在这里输入正确的css。看看变化。

.time-slice {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-left: 20px;
}
.time-slice > * {
  padding: 20px;
}
.circle {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: #29a8bb;
  background: #ffffff;
  border-radius: 32px;
  display: block;
  border: 2px solid blue;
}
.circle-wrap {
  position: absolute;
}
.circle-wrap > .circle {
  position: relative;
  left: -30px;
}
.date-time {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: 100px;
      -ms-flex-preferred-size: 100px;
          flex-basis: 100px;
}
.date,
.time {
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 10px;
}
.point-title {
  border-left: 2px solid blue;
}

HTML行与圈子重叠

3 个答案: