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. myeclipse设置jvm参数的三种方式

    方法一: 打开eclipse,选择Window--Preferences...在对话框左边的树上双击Java,再双击Installed JREs,在右边选择前面有对勾的JRE,再单击右边的“Edit” ...

  2. 玩转X-CTR100 l STM32F4 l CAN通信

    我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] X-CTR100控制器STM32F4处理器内置CAN ...

  3. 福大软工1816 · 第八次作业(课堂实战)- 项目UML设计(团队)

    团队 学号 姓名 本次作业博客链接 031602428 苏路明(组长) https://www.cnblogs.com/Sulumer/p/9822854.html 031602401 陈瀚霖 htt ...

  4. Translate Exercises(4)

    周五翻译课记录. ---------------------------------- (1)and it is imagined by many that the operations of the ...

  5. ApplicationContext详解以及多个ApplicationContext.xml的相互引用

    如果说BeanFactory是spring的心脏,那么Application就是完整的身躯.ApplicationContext就是由BeanFactory派生出来的. 一.ApplicationCo ...

  6. 彩信的在android里是如何存储的 Android MMS模块数据存取

    数据表MMS模块总共包含17张表:addr.android_metadata.attachments.canonical_addresses.drm.part.pdu.pending_msgs.rat ...

  7. tomcat部署和启动2

    catalina run 启动服务器后,按下CTRL+C,停止服务器,选择"y",退回到正常命令行. catalina stop

  8. SWIFT Enumeration(1)

    Swift中定义Enumeration跟其它语言挺类似的,看如下定义一个星期的Enumeration enum Day:Int{ case Monday = 1, Tuesday,Wednesday, ...

  9. 关于前端的margin

    margin 边界,元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之 ...

  10. 20分钟打造你的Bootstrap站点

    来源:http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html 特别声明:此篇文章由白牙根据Leon Revill的英文文章原名<Tw ...