zoukankan      html  css  js  c++  java
  • css display table使用小例子实验

    display的下面:

    table:           此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

    table-row          此元素会作为一个表格行显示(类似 <tr>)。

    table-cell          此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

    border-collapse:

    collapse:      布局元素之间使用何种形式的边框,collapse为共用边框;

    separate:      使用各自独立的边框;如果声明了border-collapse:separate;你可以使用border-spacing来定义相邻两个单元格边框间的距离

    自己写的小例子:

     1 <style type="text/css">
     2 .row{
     3     margin-top: 100px;
     4 }
     5 .imagesBox{
     6     display: table;
     7     border-collapse: collapse;
     8 }
     9 .boxrow{
    10     display: table-row;
    11 }
    12 .boxrow li{
    13     display: table-cell;
    14     border: 1px solid #ccc;
    15 }
    16 .boxrow li img{
    17     width: 100%;
    18 }
    19 </style>
    20 </head>
    21 <body>
    22 <div class="container">
    23     <div class="row">
    24         <div class="col-lg-12 imagesBox">
    25             <ul class="boxrow">
    26                 <li><img src="images/1.png" alt=""></li>
    27                 <li><img src="images/2.png" alt=""></li>
    28                 <li><img src="images/3.png" alt=""></li>
    29                 <li><img src="images/4.png" alt=""></li>
    30                 <li><img src="images/5.png" alt=""></li>
    31                 <li><img src="images/6.png" alt=""></li>
    32             </ul>
    33         </div>
    34     </div>
    35 </div>
    36 </body>
    View Code

    效果:

  • 相关阅读:
    WebClient.UploadData 方法 上载文件数据
    webclient提交并接受返回
    webClient上载下载
    斯特林反演与伯恩赛德引理
    Re0: 从 1 开始的省选前生活
    Windows 8将可能带动触摸屏的发展
    后PC时代的那些事
    关于ASP网页在IIS7.5下访问数失效
    Windows 要终结了?微软要推超级系统?
    未来10年的开放式互联网
  • 原文地址:https://www.cnblogs.com/tenWood/p/6533779.html
Copyright © 2011-2022 走看看