css display table使用小例子实验
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使用小例子实验的更多相关文章
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- css display:table圣杯布局
圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...
- [css display],table待续
昨天复习了flex布局,今天打算继续,才发现有display:table,今天有的点,别的先写上,其他的后补吧 css display // none 此元素不会被显示. // block 此元素将显 ...
- 基于CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...
- 前端小例子 基础js css html练习
前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- CSS:display:table
使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle; <!DOCTYPE html> <html l ...
- CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
随机推荐
- Time-python
1 datetime datetime是Python处理日期和时间的标准库 1.1 datetime.datetime datetime.datetime.now() ...
- 数据结构(C语言)关于树、二叉树、图的基本操作。
1) 编写算法函数int equal(tree t1, tree t2),判断两棵给定的树是否等价: int equal(tree t1,tree t2) { int k; if(t1==NULL&a ...
- L1-018 大笨钟
微博上有个自称“大笨钟V”的家伙,每天敲钟催促码农们爱惜身体早点睡觉.不过由于笨钟自己作息也不是很规律,所以敲钟并不定时.一般敲钟的点数是根据敲钟时间而定的,如果正好在某个整点敲,那么“当”数就等于那 ...
- Python 爬虫常用库(九)
- 利用InstallShiled 10.5制作AE应用程序安装包
[转]利用InstallShiled 10.5制作AE应用程序安装包 作者:3SNEWS 社区ESRI(ArcGIS)版版主:zhaoxiang_whuhttp://www.3snews.net/bb ...
- SharePoint 2013的100个新功能之网站管理(一)
一:设置盘 网站操作现在被替换为新的(设置)盘子.一些新的操作像添加一个应用.添加一个页面或设计管理器被添加而像创建网站则从菜单中移除了. 二:移除以其他用户身份登录 在SharePoint 2013 ...
- AngularJS-----$compile
原文:http://docs.ngnice.com/api/ng/service/$compile 写在前面的话: 之前我一直理解错误,我一直以为这句--function([scope], clone ...
- Java并发系列
一.前言 多线程怎么防止竞争资源,即防止对同一资源进行并发操作,那就是使用加锁机制.这是Java并发编程中必须要理解的一个知识点.其实使用起来还是比较简单,但是一定要理解. 有几个概念一定要牢记: 加 ...
- ThreadLocal讲解
一.前言 ThreadLocal这个对象就是为多线程而生的,没有了多线程ThreadLocal就没有存在的必要了.可以将任何你想在每个线程独享的对象放置其中,并在任何时候取出来. 二.基本用法 Thr ...
- Mac下百度网盘破解
Mac版百度网盘破解 先下载正版的百度网盘 打开终端输入命令 cd ~/Downloads && git clone https://github.com/CodeTips/Baid ...