使用display:table来解决一些问题
2024-10-13 19:03:02
一直有，多栏的需求，当然用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>
记录此文章，以备后查。
最新文章
- jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
- 【C#】让工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据
- appium的xpath定位
- Struts2 Convention插件的使用（1）
- 自己实现字符串操作函数strlen(),strcat(),strcpy(),strcmp()
- Windows服务监视，如果停止则启动
- [App]Xamarin First(Or Last One) App
- 使用了hibernate时候乱码问题
- 关于IE8导航串行的问题
- HTML5新增加的功能
- Mybitis配置文件中的别名以及mapper中的namespace
- 如何在Win7安装U盘中加入USB3.0驱动的支持
- Jmeter之性能测试基础
- GitHub上最火的Android开源项目整理
- 第十三章——卷积神经网络（CNN）
- vim 使用学习操作
- DDoS攻击与防御（4）
- Bootstrap框架整理
- springboot之定时任务
- python3中的比较函数