0

次のようにhtmldivに行区切り文字を配置したい：下に表示されているように黒い線の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

4

1 に答える 1

2

2つの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
}

更新されたデモ

于 2013-01-30T10:11:23.893 に答える