再探display:table-cell &&左边固定、右边自适应
display:table-cell;这个属性用的不多,它和td差不多,但是如果可以用好还是能收益不少的,下面举例说明。
1. 父元素display:table-cell,并设置verticle-align:middle; 那么无论子元素是块级元素还是行内元素都可以做到垂直居中。
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:;
padding:;
}
.father{
height: 500px;
width: 500px;
/*position: relative;*/
display: table-cell;
/*text-align: center;*/
vertical-align: middle;
background-color: #ccc; }
.son{
width: 200px;
/*float: right;*/
/*position: relative;*/
/*position: absolute;*/
height: 200px;
vertical-align: middle;
background-color: red;
display:table-cell;
}
/* span{
position: absolute;
top:50%;
transform: translate(0,-50%);
}*/ </style>
</head>
<body>
<div class="father">
<div class="son"> <span>这是一段文字</span></div>
</div>
</body>
</html>
2. 即使父元素是display:table-cell,我们也不能给其设置text-align:center, 这个特点和块级元素时非常相似了。
3. 如果父元素设置为table-cell后,给其添加position:relative;属性,因为没有脱离文档流,所以没有影响,但是如果添加了position:absolute和position:fixed以及float属性,那么就会脱离文档流,这样即使设置了vertical-align:middle,其子元素也不能居中了,因为一旦一个元素添加了使其脱离文档流的属性,它就被破坏了,这是我们需要注意的地方。
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:;
padding:;
}
.father{
height: 500px;
width: 500px;
/*position: relative;*/
position: absolute;
display: table-cell;
/*text-align: center;*/
vertical-align: middle;
background-color: #ccc; }
.son{
width: 200px;
/*float: right;*/
/*position: relative;*/
/*position: absolute;*/
height: 200px;
vertical-align: middle;
background-color: red;
display:table-cell;
}
/* span{
position: absolute;
top:50%;
transform: translate(0,-50%);
}*/ </style>
</head>
<body>
<div class="father">
<div class="son"> <span>这是一段文字</span></div>
</div>
</body>
</html>
3. display:table-cell 的元素具有inline-block的特性,但也不全是。
1.给一个元素设置为table-cell,不设置width和height,如:
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:;
padding:;
}
div{
display: table-cell;
background-color: #ccc;
} </style>
</head>
<body>
<div>这是一段文字</div>
</body>
</html>
这时可以发现效果如下:
2. 但是我们又可以通过使用table-cell完成一个左边固定,右边自适应的布局,这时他的宽度就自适应了,如下所示:
<!DOCTYPE html>
<html>
<head>
<title>fortest</title>
<style>
*{
margin:;
padding:;
}
.father{
display: table;
width: %;
/* 注意:display:table;其width必须要设置,否则不会100% */
background-color: #ccc;
}
.left{
display: table-cell;
width: 300px;
height: 500px;
background-color: blue;
}
.right{
display: table-cell;
background-color: yellow;
} </style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
补充:实现这种布局的方法还有:将子元素设置为固定的,并且float或者是position:absolute,这样就脱离文档流了,然后右边的div默认为auto, 再给右边的div一个margin-left即可。
再探display:table-cell &&左边固定、右边自适应的更多相关文章
- HTML布局之左右结构,左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- css-两个div并排,左边宽度固定右边自适应的布局 的实现方法
<div class= "container"> <div class="left"></div> <div clas ...
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- 实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- css网页布局 --- 左边固定,右边自适应
div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...
- table左边固定-底部横向滚动条
是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表 ...
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- 移动端list布局,左边固定,右边自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议85:Task中的异常处理
建议85:Task中的异常处理 在任何时候,异常处理都是非常重要的一个环节.多线程与并行编程中尤其是这样.如果不处理这些后台任务中的异常,应用程序将会莫名其妙的退出.处理那些不是主线程(如果是窗体程序 ...
- thinkjs用户请求处理
- git command cheat sheet
clone:克隆 --non-bare:(默认值)一般的克隆方式 --bare:只克隆.git目录 --mirror:只克隆.git目录,并且还保持与origin的关联,可以fetch commit: ...
- Transaction And Lock--存储过程中使用事务的模板
某公司内部使用的模板 create procedure [usp_my_procedure_name] as begin set nocount on; declare @trancount int; ...
- MySQL开启日志记录查询/执行过的SQL语句
作为后端开发者,遇到数据库问题的时候应该通过分析SQL语句来跟进问题所在,该方法可以记录所有的查询/执行的SQL语句到日志文件. 方法有几种,但是个人觉得以下这种最简单,但是重启MySQL服务后需要重 ...
- RDLC报表的相关技巧二(主从报表)
为了广泛支持客户端,系统框架运行在.Net Framework 4.0之上,Report viewer的版本也限制在11.0.3366.16. 使用NUGET安装Microsoft.ReportVie ...
- centos 安装 Pip 的方法总结
转自https://blog.csdn.net/u014236259/article/details/75212659 在我们安装Python后,如果未安装包管理工具pip,此时需要自己手动安装: 方 ...
- <转>jmeter JDBC Request之Query Type
本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...
- C# - Common Tool
Json 涉及命名空间 using System.IO; using System.Net; using System.Runtime.Serialization.Json; using Newton ...
- C#-★★函数★★
一个较大的程序一般应分为若干个程序块,每一个模块用来实现一个特定的功能.所有的高级语言中都有子程序这个概念,用子程序来实现模块的功能.在C#语言中,子程序的作用是由一个主函数和若干个函数构成.由主函数 ...