• 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

    效果:

  • 相关阅读:
    tetrahedron (公式)
    Subway (树中心 + 树hash)
    包装类的Null值
    基本数据类型的范围边界
    基本数据类型的装箱和拆箱()优先使用基本数据类型
    第三章-python基础 笔记
    第二章-Python起步
    第一章-欢迎来到python世界
    第八章-连接与多张表的操作
    php错误和异常的处理方式
  • 原文地址:https://www.cnblogs.com/tenWood/p/6533779.html
Copyright © 2020-2023  润新知