记录display:table的使用
兼容性:不兼容IE7
1.左右对齐
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>左右两端布局</title>
<style> .table {
display: table;
border: 1px solid #06c;
padding: 15px;
width: 100%;
} .table .table-left {
text-align: left;
display: table-cell
} .table .table-right {
text-align: right;
display: table-cell
} .table .table-content {
width: 100px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
display: inline-block;
font-size: 40px;
line-height: 100px;
}
</style>
</head> <body>
<div class="table">
<div class="table-left">
<div class="table-content">左边</div>
</div>
<div class="table-right">
<div class="table-content">右边</div>
</div>
</div>
</body> </html>
2.居中
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>图片居中对齐</title>
<style>
* {
box-sizing: border-box;
} .table {
display: table;
border: 1px solid #06c;
padding: 5px;
max-width: 1000px;
margin: 10px auto;
width: 100%;
} .table-center {
height: 150px;
width: 100px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #4679bd;
}
</style>
</head> <body>
<div class="table">
<div class="table-center">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556086970323&di=51c11bb425e5f92ca3c9e455aad95675&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F20%2F57%2F95i58PIC6Qh_1024.jpg" width="50px" height="50px" alt="logo" />
</div>
</div>
</body> </html>
3.平均分
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>平均分</title>
<style>
* {
box-sizing: border-box;
} .table {
display: table;
border: 1px solid #000;
padding: 5px;
max-width: 1000px;
margin: 0 auto;
width: 100%;
} .table ul {
display: table;
width: 100%;
padding: 0;
border-right: 1px solid #ccc;
} .table ul li {
display: table-cell;
border: 1px solid #ccc;
text-align: center;
height: 100px;
border-right: none;
line-height: 100px;
}
</style>
</head> <body>
<div class="table">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body> </html>
记录display:table的使用的更多相关文章
- 使用display:table来解决一些问题
一直有,多栏的需求,当然用table布局,很快就做完了.不怎么喜欢用table,刚开始使用display:table,但是有一条老是不能达到我的效果,那就是有一行不固定宽度的时候,就不知道怎么处理,今 ...
- [css display],table待续
昨天复习了flex布局,今天打算继续,才发现有display:table,今天有的点,别的先写上,其他的后补吧 css display // none 此元素不会被显示. // block 此元素将显 ...
- 垂直居中display:table;
父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- display:table 水平居中
<div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...
- display:table表格合并单元格
直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- Display:table;妙用,使得左右元素高度相同
我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...
- 基于CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...
随机推荐
- DataPipeline | PayPal庞姬桦:大数据在小微企业贷款上的运用
庞姬桦女士毕业于北京大学和美国哥伦比亚大学,目前担任PayPal公司消费者风险管理总监,负责通过大数据实现对互联网金融风险的侦测.跟踪.管控和防范.在加入PayPal之前,曾任职于渣打银行(中国)和美 ...
- SQL Server移除事务日志后sys.master_files依然存在记录问题
在SQL Server中移除了事务日志文件后,使用sys.master_files检查时发现,对应的事务日志文件记录信息依然存在sys.master_files里面,只是状态state_desc为OF ...
- 二、redis命令简单使用(不区分大小写)
key * 查看redis中的所有键(当键的数量较多会影响性能,不建议生产环境中使用) exists key 判断一个键是否存在,存在返回1,否则返回0 del key [key...] 删除 ...
- cnzz流量统计
var regexp=/\.(baidu)(\.[a-z0-9\-]+){1,2}\//ig; var where =document.referrer; if(where.indexOf(" ...
- webpack打包nodejs项目(前端代码)
PS.若本文没有帮到你可以看看我的进阶版点此前往 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引 ...
- 基于HTTP协议的几种实时数据获取技术
原文链接https://www.cnblogs.com/xrq730/p/9280404.html,作者博客园----五月的仓颉,转载请注明出处,谢谢 HTTP协议 HTTP协议大家都很熟悉了,开始本 ...
- Feign源码解析
1. Feign源码解析 1.1. 启动过程 1.1.1. 流程图 1.1.2. 解释说明 Feign解析过程依赖Spring的初始化,它通过实现ImportBeanDefinitionRegistr ...
- PMBook - 上课体会
一.上课感觉怎么样? 这两天都在培训PMP,第一天提前20分到的,空位很多,挑了第二排坐下,看投影效果挺好.第二天我提前30分钟到教室,中间的位置都坐满了,只能找其他位置了.看来大家积极性提高了很多, ...
- 学习ASP.NET Core Razor 编程系列十七——分组
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- jquery快速入门(二)
jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...