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>
效果: