使用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循环处理,其基本程序逻辑为: ...
随机推荐
- mysql 查询表结构
use information_schema; select column_name, column_type, data_type, is_nullable, column_comment from ...
- vmware 安装dos注意
vmware创建ms-dos虚拟机,安状DOS71.ISO. 新创建的机器,启动次序为Removable Devices/Hard Device/CD-ROM Device 新建的机器,第一次启动时, ...
- 遍历list、set、map和array
public static void main(String[] args) { /*1. List*/ ArrayList<Integer> list = new ArrayList&l ...
- linux系统root用户忘记密码的重置方法
如果不小心忘记了新安装的lCentOS7的root密码,现在将找回过程分享给大家. 1.首先,在启动grub菜单,选择编辑选项启动: 2.然后,按e 进入编辑模式: 3.将'linux 16'行'ro ...
- 【转】实现ViewPager懒加载的三种方法
方法一 在Fragment可见时请求数据.此方案仍预加载了前后的页面,但是没有请求数据,只有进入到当前Framgent时才请求数据. 优点:实现了数据的懒加载缺点:一次仍是三个Framgment对象, ...
- c/c++ 缓冲区的刷新
利用string 对象查看缓冲区的变化,因为每个string对象在输入时会以空格作为分界. #include<iostream> #include<string> using ...
- 【原创】threejs实现一个全景地球
介绍 本demo实现一个旋转的全景地球,效果如下 技术分析 1.球体 2.球体表面贴图 实现 创建容器 <div id="container"></div> ...
- iOS10 推送必看(基础篇)
虽然这篇文章比较长,也不好理解,但是还是建议大家收藏,以后用到的时候,可以看看,有耐心的还是读一读. 这篇文章开始,我会跟大家好好讲讲,苹果新发布的iOS10的所有通知类. 一.创建本地通知事例详解: ...
- 《ASP.NET MVC高级编程(4版)》读书笔记(5)表单和HTML辅助方法
5.1 表单使用 5.1.1 action 和 method 特性 <form action="/Home/Index"> <input name=&qu ...
- 行为型模式之Observer模式
观察者模式(又被称为发布-订阅模式.模型-视图模式.源-收听者模式或从属者模式) 观察者模式中,一个目标对象管理所有依赖于它的观察者对象,并且在它本身的状态改变时主动发出通知. 应用场景 拍卖会可以认 ...