2列div中的行分隔符

Question

我想在html div中放行分隔符，如下所示：黑色Z线形状“镜像”，如下所示，我试图设置最后左侧div和第一个右侧div边框，但我无法想到我怎么能画出垂直线，以非常聪明的方式使用CSS

我试过这个： -

<div id="wrap">
        <div>
            <div class="left_col">Industry:</div>
            <div class="right_col" style="border-Top: 1px solid black">Insurance</div>
        </div>
        <div >
            <div class="left_col" >Co. Size:</div>
            <div class="right_col">201 - 500 Employees</div>
        </div>
        <div >
            <div class="left_col">Working Hours:</div>
            <div class="right_col">Regular hours, Mondays-Fridays</div>
        </div>
        <div >
            <div class="left_col">Benefits:</div>
            <div class="right_col">Medical, Education support, Loans, Dental</div>
        </div>
        <div >
            <div class="left_col" style="border-bottom: 1px solid black">Spoken Language:</div>
            <div class="right_col">English</div>
        </div>
    </div>

示例就在这里：jsfiddle

Answer 1

使用两个dis来包装左右列

这是符合您要求的CSS

 #wrap{margin:10px;}
.left{
   width:50%; display:table-cell;
    border-bottom: 1px solid black; 
    border-right: 1px solid black; 
    padding:15px
}
.right{
    display:table-cell;
    border-top: 1px solid black; 
    vertical-align:top;  width:50%;
    padding:15px
}

<强> UPDATED DEMO