使用display:table来解决一些问题

时间:2023-12-24 11:59:07

一直有,多栏的需求,当然用table布局,很快就做完了。不怎么喜欢用table,刚开始使用display:table,但是有一条老是不能达到我的效果,那就是有一行不固定宽度的时候,就不知道怎么处理,今天终于发现了怎么解决这个问题的办法,将width:尽可能大。使用table-layout:auto;代码如下:

 <div style="display:table;" id="addresses">
<div style="display:table-row;">
<div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
<img style="width: 19px;" src="../images/mypoint.png" />
</div>
<div style="display:table-cell;width:99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
<div>无法确认地址,请电话联系客服我很长!</div>
<div style="color: #999;">xxxxx</div>
</div>
<div style="display:table-cell;padding-right:10px; vertical-align: middle;width:100px;font-size:14px;white-space:nowrap;border-bottom:1px solid #999;"><span style="color: #999; line-height: 40px">¥10.00起送</span></div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
<img style="width: 19px;" src="../images/mypoint.png" />
</div>
<div style="display:table-cell;width:99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
<div>话联系客服!</div>
<div style="color: #999;">xxxxx</div>
</div>
<div style="display:table-cell;padding-right:10px; vertical-align: middle;width:100px;font-size:14px;white-space:nowrap;border-bottom:1px solid #999;"><span style="color: #999; line-height: 40px">¥125.00起送</span></div>
</div>
</div>

记录此文章,以备后查。