Question

我想将内部的div边框触摸到外部的div底部，但不幸的是，我想不出任何方法。这是我的代码：

.clr {clear:both;}

#timeline {padding-top:50px; display:table;}
.timeline_cont {width:90%;}

.timeline_date_cont {/*float:left;*/ height:100%; width:200px; background:red; display:table-cell;}
.timeline_line_1 {border-right:2px dashed #c3c5c8; height:20px; width:50%;}
.timeline_line_2 {border-right:2px dashed #c3c5c8; height:100%; width:50%;}
.timeline_icon {background:#fff; border:1px solid #000; border-radius:50%; height:20px; line-height:20px; margin:0 auto; padding:3px; text-align:center; width:20px;}
.timeline_date {background:#fff; border-radius:10px; color:#2585fe; margin:0 auto; padding:5px; text-align:center; width:120px;}

.timeline_box_cont {/*float:left;*/ padding-bottom:50px; width:600px; background:blue;display:table-cell;}
.timeline_box {background:#fff; border-radius:10px; box-shadow:0px 0px 20px #c9cbce; line-height:20px; margin:0 auto; padding:20px; position:relative; }

<div id="timeline">
    <div class="timeline_cont">
        <div class="timeline_date_cont">
            <div class="timeline_icon">$</div>
            <div class="timeline_line_1">&nbsp;</div>
            <div class="timeline_date">6 days ago</div>
            <div class="timeline_line_2">&nbsp;</div>
        </div>
    <div class="timeline_box_cont"><div class="timeline_box customer_progress_list"><div class="customer_progress_menu_btn">&nbsp;</div><div></div><div class="customer_progress_info">update</div></div></div>
    <div class="clr"></div>
    </div>
    
    <div class="timeline_cont">
        <div class="timeline_date_cont">
        <div class="timeline_icon">$</div>
        <div class="timeline_line_1">&nbsp;</div>
        <div class="timeline_date">6 days ago</div>
        <div class="timeline_line_2">&nbsp;</div>
        </div>
        <div class="timeline_box_cont"><div class="timeline_box customer_progress_list"><div class="customer_progress_menu_btn">&nbsp;</div><div>lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is, lets see how good this porgress is,</div><div class="customer_progress_info">update</div></div></div>
        <div class="clr"></div>
    </div>
    <div class="timeline_cont">
        <div class="timeline_date_cont">
        <div class="timeline_icon">$</div>
        <div class="timeline_line_1">&nbsp;</div>
        <div class="timeline_date">6 days ago</div>
        <div class="timeline_line_2">&nbsp;</div>
        </div>
        <div class="timeline_box_cont"><div class="timeline_box customer_progress_list"><div class="customer_progress_menu_btn">&nbsp;</div><div></div><div class="customer_progress_info">update</div></div></div>
    <div class="clr"></div>
    </div>
</div>

您可以在美元符号下方看到虚线边框。实际上，我想扩展此虚线边框，并使其与下一个美元圆以下的线接触。我正在使用display:table和display:table-cell使divs timeline_date_cont和timeline_box_cont高度相等。但是，实际上不知道如何扩展timeline_line_1和timeline_line_2的边界以使顶部和底部彼此接触。有想法吗？

Answer 1

Do you want to get something like this?

{}:dict()

.timeline_cont {
  display: flex;
}

.left {
  padding: 30px 0 30px 0;
  background: tomato;
  width: 200px;
  color: white;
  position: relative;
}

.left:after {
  content: '';
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed #ccc;
  z-index: 0;
}

.timeline_cont:first-child .left:after {
  top: 30px;
}



.timeline_cont:last-child .left:after {
  bottom: 30px;
}


.right {
    background: blue;
    width: 200px;
}

.timeline_icon {z-index: 2;position:relative;color:black;background:#fff; border:1px solid #000; border-radius:50%; height:20px; line-height:20px; margin:0 auto; padding:3px; text-align:center; width:20px;}
.timeline_date {z-index: 2;position:relative;background:#fff; border-radius:10px; color:#2585fe; margin:20px auto 0 auto; padding:5px; text-align:center; width:120px;}

Answer 2

click the image to see your answer

您可以像这样更改css，也可以参考图片

.timeline_line_2 {
border-right: 2px dashed #c3c5c8;
height: 53px;
width: 74px;
/* padding: 13px 0px 0px 0px; */
background-color: green;
position: absolute;

}

Answer 3

您可以按照我在另一篇文章中找到的this解决方案的方式进行操作：

/* Reset Bootstrap props where needed: */

#timeline>.row .col-3,
#timeline>.row .col-9 {
  padding: 0;
}

#timeline .timeline-icon {
  box-sizing: content-box;
}

#timeline>.row:first-of-type .col-3:first-of-type>.left {
  padding-top: 10px;
}


/* Actual coding: */

.left {
  background-color: red;
}

.right {
  background-color: blue;
}

.left,
.right {
  height: 100%;
}

.timeline-icon {
  background-color: #fff;
  width: 20px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 50%;
  padding: 3px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
}

.timeline_date {
  background: #fff;
  border-radius: 10px;
  color: #2585fe;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
  width: 120px;
  position: relative;
  z-index: 1;
}

.timeline-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 10px;
}

.left:after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed #c3c5c8;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="timeline">
  <div class="row">
    <div class="col-3">
      <div class="left">
        <div class="timeline-icon">
          $
        </div>
        <div class="timeline_date">
          6 days ago
        </div>
      </div>
    </div>
    <div class="col-9">
      <div class="right">
        <div class="timeline-box">
          Foo
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <div class="left">
        <div class="timeline-icon">
          $
        </div>
        <div class="timeline_date">
          6 days ago
        </div>
      </div>
    </div>
    <div class="col-9">
      <div class="right">
        <div class="timeline-box">
          Bar
        </div>
      </div>
    </div>
  </div>
</div>

JSFiddle

如何将内部的div边界触摸到外部的div底侧？

3 个答案: