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

效果:

posted on 2017-03-11 01:05  有点懒惰的大青年  阅读(244)  评论(0编辑  收藏  举报