div模擬table

CSS：

.head{
    display: table;
    position: relative;
    margin: 10px 0;
    width: 100%;
}
.head div{
    height:100%;display: table-cell;
    vertical-align: bottom;
}
.head span{
    color: #AC5697;
}
.toLeft{
    text-align: left;
}
.toRight{
    text-align: right;
}

HTML：

<div class="head">
    <div class="toLeft"><span>車牌號 : </span>粵H21643</div>
    <div class="toRight"><span>檢票 : </span>截至目前爲止還差4人須要檢票</div>
</div>

看clss選擇器 head，在父級DIV使用了display: table; 它的子元素則是 display: table-cell;

這樣作就會達到模擬table的效果，注意這裏我只是說模擬table的效果並不是真的作成table（那還不如直接寫table），

這樣作的好處：在同一行裏顯示連個元素。

1. 固然display爲inline也是能夠一行顯示一個以上元素，可是這樣width：100%；會失效。

2. 加float屬性也能夠，可是缺點是：同行的元素的無關聯性，好比左邊的元素因爲內容過多，已經將height撐到50px；這時右邊的兩個字仍是停留在20px