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

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

复制代码
 1 <div style="display:table;" id="addresses">
 2                         <div style="display:table-row;">
 3                             <div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
 4                                 <img style="width: 19px;" src="../images/mypoint.png" />
 5                             </div>
 6                             <div style="display:table-cell;width:99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
 7                                 <div>无法确认地址,请电话联系客服我很长!</div>
 8                                     <div style="color: #999;">xxxxx</div>
 9                                 </div>
10                             <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>
11                         </div>
12                         <div style="display:table-row;">
13                             <div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
14                                 <img style="width: 19px;" src="../images/mypoint.png" />
15                             </div>
16                             <div style="display:table-cell;width:99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
17                                 <div>话联系客服!</div>
18                                     <div style="color: #999;">xxxxx</div>
19                                 </div>
20                             <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>
21                         </div>
22                     </div>
复制代码

记录此文章,以备后查。

posted @   forhells  阅读(910)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示