display的下面：

table：　　　　　　　　　　　此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

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

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

border-collapse：

collapse：　　　　　　布局元素之间使用何种形式的边框，collapse为共用边框；

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

自己写的小例子：

 <style type="text/css">

 .row{

     margin-top: 100px;

 }

 .imagesBox{

     display: table;

     border-collapse: collapse;

 }

 .boxrow{

     display: table-row;

 }

 .boxrow li{

     display: table-cell;

     border: 1px solid #ccc;

 }

 .boxrow li img{

     width: 100%;

 }

 </style>

 </head>

 <body>

 <div class="container">

     <div class="row">

         <div class="col-lg-12 imagesBox">

             <ul class="boxrow">

                 <li><img src="data:images/1.png" alt=""></li>

                 <li><img src="data:images/2.png" alt=""></li>

                 <li><img src="data:images/3.png" alt=""></li>

                 <li><img src="data:images/4.png" alt=""></li>

                 <li><img src="data:images/5.png" alt=""></li>

                 <li><img src="data:images/6.png" alt=""></li>

             </ul>

         </div>

     </div>

 </div>

 </body>

效果：

css display table使用小例子实验的更多相关文章

  1. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  2. css display:table圣杯布局

    圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...

  3. [css display],table待续

    昨天复习了flex布局,今天打算继续,才发现有display:table,今天有的点,别的先写上,其他的后补吧 css display // none 此元素不会被显示. // block 此元素将显 ...

  4. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  5. 前端小例子 基础js css html练习

    前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...

  6. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  7. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  8. CSS：display:table

    使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle; <!DOCTYPE html> <html l ...

  9. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

随机推荐

  1. python3 win10_x64 安装pcapy

    稀里糊涂就装上了 大概记录一下都有什么. visual studio build tools 2015 下载地址: http://landinghub.visualstudio.com/visual- ...

  2. C++字符串函数之append()、insert()

    仅记录自己比较容易忘的几个: B.insert(1,A,2,2) 将A中的从第3个字符开始的2个字符插入到B的第1个字符后面(字符串A和B实际上分别是const char [5]和const char ...

  3. mac_os_x更新yosemite以后github客户端更新提示ca认证错误解决办法

    最近手贱更新了mac os yosemite的系统版本,更新以后发现部分软件无法使用,例如php 扩展的redis模块,mou,eclipse等等,甚是郁闷啊.对于图形化的软件还好说去官网更新一下新版 ...

  4. C语言基础:内存 分类： iOS学习 c语言基础 2015-06-10 21:59 23人阅读 评论(0) 收藏

    全局变量:定义在函数之外.(不安全)   局部变量;定义在函数之内. 内存的划分:1栈区   2堆区  3静态区(全局区) 4常量区 5代码区 栈区..静态区.常量区.代码区的数据都是由系统分配和释放 ...

  5. asp.net mvc 快捷下拉列表

    各种表单中可能经常会遇到使用各种下拉列表的地方, 有些数据是从数据库来的, 有些则是固定数值, 为了方便, 快速的构造一个可以保持状态的下拉列表, 就出现了下面的方法 2分钟构思的代码, 比较粗糙, ...

  6. ftp添加虚拟用户的实例

    本文主要讲解添加一个ftp虚拟用户的流程,接上文 https://www.cnblogs.com/tssc/p/9582780.html ========= 完美的分割线 ======== 1.修改授 ...

  7. CodeForces - 1093G：Multidimensional Queries （线段树求K维最远点距离）

    题意:给定N个K维的点,Q次操作,或者修改点的坐标:或者问[L,R]这些点中最远的点. 思路:因为最后一定可以表示维+/-(x1-x2)+/-(y1-y2)+/-(z1-z2)..... 所以我们可以 ...

  8. hdu2069-2071

    hdu2069 选取硬币组成定值,暴力 #include<stdio.h> ]={,,,,,}; int main(){ int n; while(scanf("%d" ...

  9. Servlet基本操作

    一.Servlet的请求流程 web项目中的web.xml文件配置为: <servlet> <!--别名--> <servlet-name>Hello</se ...

  10. java安全性-引用-分层-解耦

    Java不支持指针, 一切对内存的访问都必须通过对象的实例变量来实现,这样就防止程序员使用 "特洛伊"木马等欺骗手段访问对象的私有成员 访问一个对象必须通过这个对象的引用 java ...