一直有，多栏的需求，当然用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. WinForm各种API---时时更新

    好文要顶 关注我 收藏该文 徐淳 关注 - 1 粉丝 - 3       0 0     本文原文地址:http://www.cnblogs.com/hqxc/p/6160685.html 徐淳 [D ...

  2. 把两个table放在一个Repeater中显示

    DataTable dt; DataTable dt1; HLoanApplyInfo applyInfo = HLoanApplyBll.GetModelById(FLoanID); FLoanID ...

  3. grep

    http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2856896.html

  4. xamarin android webview XHR错误

    Cross origin requests are only supported for protocol schemes MLHttpRequest cannot load file:///F:/G ...

  5. Count the number of possible triangles

    From: http://www.geeksforgeeks.org/find-number-of-triangles-possible/ Given an unsorted array of pos ...

  6. 442. Find All Duplicates in an Array

    https://leetcode.com/problems/find-all-duplicates-in-an-array/ 一列数,1 ≤ a[i] ≤ n (n = size of array), ...

  7. Django~待解决的问题

    1.一个Model.py中简单调用多个数据库,不写数据库路由

  8. 用极简方式实现新浪新版本特性展示效果--view的图片轮播

    在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍 由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用scroll ...

  9. javase--反射

    //书写规则 package cn.reflex; public interface PCI { public void open(); public void close(); } //调用方法 p ...

  10. PyAutoGUI 简介

    转载来自: https://muxuezi.github.io/posts/doc-pyautogui.html http://blog.topspeedsnail.com/archives/5373 ...