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>

    记录此文章,以备后查。

  • 相关阅读:
    Roce ofed 环境搭建与测试
    Ubuntu 1804 搭建NFS服务器
    Redhat 8.0.0 安装与网络配置
    Centos 8.1 安装与网络配置
    SUSE 15.1 系统安装
    VSpare ESXi 7.0 基本使用(模板、iso、SRIOV)
    VSpare ESXi 7.0 服务器安装
    open SUSE leap 15.1 安装图解
    KVM虚拟机网卡连接网桥
    GitHub Action一键部署配置,值得拥有
  • 原文地址:https://www.cnblogs.com/forhell/p/5798715.html
Copyright © 2011-2022 走看看