一直有,多栏的需求,当然用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来解决一些问题的更多相关文章

  1. Display:table;妙用,使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...

  2. display:table的几个妙用:垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  3. display:table的用法

    目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出来的文件k数比用table写出来的要小 ...

  4. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  5. VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  6. css Table布局:基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  7. 使用display:table使两栏布局高度相等

    两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? <!DOCTYPE html> <html> <head> <meta charse ...

  8. clearfix为什么用display:table,而不用display:block

    我们都知道clearfix一般这么写: .clearfix:before,.clearfix:after{ content:""; display:table; } .clearf ...

  9. Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题

    转: Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题 在实际PL/SQL编程中,我们要对动态取出来的一组数据,进行For循环处理,其基本程序逻辑为: ...

随机推荐

  1. 【Unity3d】火炬之光的X射线效果

    http://www.cnblogs.com/dosomething/archive/2012/04/03/2431149.html 人物和摄像机之间存在例如墙壁等的阻挡时  可以修改阻挡材质的alp ...

  2. Mongodb命令集合

    一.数据库常用命令 1.Help查看命令提示 复制代码代码如下: help db.help(); db.yourColl.help(); db.youColl.find().help(); rs.he ...

  3. HTTP状态码

    http状态码负责表示客户端HTTP请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作. 状态码类别分组如下: 1. 1XX: informational(信息性状态码)  接收的请求正 ...

  4. 设计模式--外观模式Facade(结构型)

    一.外观模式 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观模式定义了一个高层接口,让子系统更容易被使用. 二.UML图 三.例子 举个编译器的例子,假设编译一个程序需要经过四个步骤: ...

  5. iOS web remote debug 正确的姿势

    在使用iOS Remote debug需要做以下准备 1. iOS devices 开启java script and web inspector 开启方式如下: 2. mac OS 自带的Safar ...

  6. MAC OS PHP

    Apache与PHP的配置 OSX自带了apache和php,但默认情况下没有开启,打开终端 sudo apachectl start 这时在浏览器中输入localhost应该就会出现apache标准 ...

  7. vector

    .vector是一个能够存放任意类型的动态数组,能够增加和压缩数据. .vector容器最擅长的工作是: 利用位置索引存储容器中的单个元素. 以任何顺序迭代容器中的元素. 在容器的末尾追加和删除元素. ...

  8. tp5 model 的数据自动完成

    auto属性自动完成包含新增和更新操作 namespace app\index\model; use think\Model; class User extends Model { protected ...

  9. mysql安装时到最后start service时就不响应了的解决方法

  10. 修改NavigationView中的Item的Icon大小

    <dimen name="navigation_icon_size">48dp</dimen>