zoukankan      html  css  js  c++  java
  • 使用display:table来解决一些问题

    一直有,多栏的需求,当然用table布局,很快就做完了。不怎么喜欢用table,刚开始使用display:table,但是有一条老是不能达到我的效果,那就是有一行不固定宽度的时候,就不知道怎么处理,今天终于发现了怎么解决这个问题的办法,将尽可能大。使用table-layout:auto;代码如下:

     1 <div style="display:table;" id="addresses">
     2                         <div style="display:table-row;">
     3                             <div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
     4                                 <img style=" 19px;" src="../images/mypoint.png" />
     5                             </div>
     6                             <div style="display:table-cell;99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
     7                                 <div>无法确认地址,请电话联系客服我很长!</div>
     8                                     <div style="color: #999;">xxxxx</div>
     9                                 </div>
    10                             <div style="display:table-cell;padding-right:10px;  vertical-align: middle;100px;font-size:14px;white-space:nowrap;border-bottom:1px solid #999;"><span style="color: #999; line-height: 40px">¥10.00起送</span></div>
    11                         </div>
    12                         <div style="display:table-row;">
    13                             <div style="display:table-cell;padding-right: 15px;vertical-align: middle;padding-left:25px;border-bottom:1px solid #999;">
    14                                 <img style=" 19px;" src="../images/mypoint.png" />
    15                             </div>
    16                             <div style="display:table-cell;99999px;font-size:14px;padding-right:5px;border-bottom:1px solid #999;">
    17                                 <div>话联系客服!</div>
    18                                     <div style="color: #999;">xxxxx</div>
    19                                 </div>
    20                             <div style="display:table-cell;padding-right:10px;  vertical-align: middle;100px;font-size:14px;white-space:nowrap;border-bottom:1px solid #999;"><span style="color: #999; line-height: 40px">¥125.00起送</span></div>
    21                         </div>
    22                     </div>

    记录此文章,以备后查。

  • 相关阅读:
    git回滚分支版本到指定版本
    java的垃圾回收
    java对象模型
    java内存模型
    偏向锁浅析
    maven打包报错:在类路径或引导类路径中找不到程序包 java.lang
    《microsoft sql server 2008技术内幕 t-sql语言基础》
    《SQL基础教程》
    内连接,外链接(左连接、右连接、全连接),交叉连接大总结+附SQL JOINS图解[转]
    《大型网站技术架构》1.大型网站架构演练
  • 原文地址:https://www.cnblogs.com/forhell/p/5798715.html
Copyright © 2011-2022 走看看