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

我想把内部的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来制作高度相等的div timeline_date_cont和timeline_box_cont。但真的不知道如何扩展timeline_line_1和timeline_line _2边界，使其上下两侧相互接触。知道吗？

你想得到这样的东西吗？

.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;}

<div class="timeline">
<div class="timeline_cont">
<div class="left">
<div class="timeline_icon">$</div>
<div class="timeline_date">6 days ago</div> 
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.      
</div>
</div>
<div class="timeline_cont">
<div class="left">
<div class="timeline_icon">$</div>
<div class="timeline_date">6 days ago</div>         
</div>
<div class="right">update</div>
</div>  
<div class="timeline_cont">
<div class="left">
<div class="timeline_icon">$</div>
<div class="timeline_date">6 days ago</div>         
</div>
<div class="right">update</div>
</div>   
</div>

点击图片查看答案

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

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

}

您可以按照我在另一篇文章中找到的解决方案做一些事情：

/* 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

相关内容

最新更新

热门标签：