【发布时间】：2019-05-22 14:54:19
【问题描述】：
我想将内部的 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"> </div>
<div class="timeline_date">6 days ago</div>
<div class="timeline_line_2"> </div>
</div>
<div class="timeline_box_cont"><div class="timeline_box customer_progress_list"><div class="customer_progress_menu_btn"> </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"> </div>
<div class="timeline_date">6 days ago</div>
<div class="timeline_line_2"> </div>
</div>
<div class="timeline_box_cont"><div class="timeline_box customer_progress_list"><div class="customer_progress_menu_btn"> </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"> </div>
<div class="timeline_date">6 days ago</div>
<div class="timeline_line_2"> </div>
</div>
<div class="timeline_box_cont"><div class="timeline_box customer_progress_list"><div class="customer_progress_menu_btn"> </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 的边界以相互接触顶部和底部。有什么想法吗？
【问题讨论】：
-
我一直在试图摆弄，我现在只能告诉你的是
display: table-cell导致你的元素有某种margin，这会阻止线路连接。我尝试使用 Bootstrap 来解决这个问题，但要正确完成它似乎相当具有挑战性。您可能不想使用与使文档表现得像表格相关的任何东西。