使用display:table来解决一些问题
一直有,多栏的需求,当然用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>
记录此文章,以备后查。
使用display:table来解决一些问题的更多相关文章
- Display:table;妙用,使得左右元素高度相同
我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...
- display:table的几个妙用:垂直居中、浮动……
一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...
- display:table的用法
目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出来的文件k数比用table写出来的要小 ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table
一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- 使用display:table使两栏布局高度相等
两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? <!DOCTYPE html> <html> <head> <meta charse ...
- clearfix为什么用display:table,而不用display:block
我们都知道clearfix一般这么写: .clearfix:before,.clearfix:after{ content:""; display:table; } .clearf ...
- Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题
转: Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题 在实际PL/SQL编程中,我们要对动态取出来的一组数据,进行For循环处理,其基本程序逻辑为: ...
随机推荐
- 打不死的redis集群
导读 最近遇到部分系统因为redis服务挂掉,导致部分服务不可用.所以希望搭建一个redis集群镜像,把原先散落各处的redis服务器统一管理起来,并且保障高可用和故障自动迁移. 最近遇到部分系统因为 ...
- SQL分组多列统计(GROUP BY后按条件分列统计)
as tjsl from fyxx group by zt,whbmbh end) as ybhsl from fyxx group by whbmbh 下面是摘自别人的博客 最近遇到一个问题,需要对 ...
- linux下编译gcc6.2.0
linux下编译gcc6.2.0 在archlinx的下gcc已经更新到6.2.1了,win10的WSL下还是gcc4.8.官方源没有比较新的版本,于是自己编译使用. GCC6的几个新特性 GCC 6 ...
- html5 选择元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- erlang 分布式数据库Mnesia 实现及应用
先推荐一篇:mnesia源码分析(yufeng) - linear hash ETS/DETS/mnesia 都使用了linear hash算法 http://en.wikipedia.org ...
- 如何将Sphinx生成的html文档集成进入Django
参考 http://stackoverflow.com/questions/10594618/django-and-sphinx-how-to-view-the-html-sphinx-generat ...
- 简化MSI在WIN10的安装
这里给大家分享一个简化MSI安装的工具 InstallByDrag: 在win10系统中,通过双击方式打开 MSI 安装文件,可能被提示由于dll加载问题无法安装,这是由于没有使用管理员权限运行.而M ...
- Qt在ui中使用代码添加新的控件
QLabel* label = new QLabel(ui->centralWidget);
- c++中4个与类型转换相关的关键字分析
static_cast reinterpret_cast dynamic_cast const_cast 1.**static_cast------运算符完成相关类型之间的转换** 使用场景:如在同一 ...
- 动态创建DAL层类的实例
为了可扩展性,方便以后对于代码的修改维护,使用动态创建DAL层对象. 1.首先在webconfig中的configuration下添加配置项 <appSettings> <add k ...