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