再探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++11中的to_string
C++11之前,标准库没有提供数字类型转字符串的函数,需要借助sprintf.stringstream等,现在C++11提供了std::to_string函数,可以直接使用了: 点击(此处)折叠或打开 ...
- java 访问HTTPS rest服务
import java.io.*;import java.net.*;import java.security.cert.CertificateException;import java.securi ...
- 设计模式1---单例模式（Singleton pattern）
单例模式Singleton 面试的时候,问到许多年轻的Android开发他所会的设计模式是什么,基本上都会提到单例模式,但是对 单例模式也是一知半解,在Android开发中我们经常会运用单例模式,所以 ...
- Vue--axios：vue中的ajax异步请求（发送和请求数据）、vue-resource异步请求和跨域
跨域原理: 一.使用axios发送get请求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 & ...
- Android-主题
主题分为两种: 第一种:使用Android系统提供的主题 第二种:自己定义主题 样式 与 主题 区分理解 样式是控制(View的子类风格)控件风格 或者 是(ViewGroup的子类风格)布局风 ...
- 学习笔记之Struts2—工作原理图
本文以Struts2的官方工作原理图作为主线讲解(参考部分书籍与视频) 1.初始概念 struts2是web.xml进行配置的一个过滤器,当web项目启动的时候,这个过滤器就会生效. 2.web.xm ...
- SQL Server递归实例
例子一 -- ============================================= -- 根据EID返回其下属的EID,Layer=1表示直接下属,NULL返回所有下属 -- s ...
- Visual Studio下使用NUnit进行测试驱动开发
在Visual Studio 2015中集成的MSTest可以用于单元测试. 在项目中,选中需要测试的方法,点击鼠标右键,选择弹出菜单中的[创建单元测试],按照默认设置,即可自动新建一个测试项目. 需 ...
- MicroPython （一）点亮我的Led
工具 : putty F429Discovery 开发板 Notepad++ 注意:不知道为什么 其他的终端工具有问题,推荐 putty 基本没有发现问题 putty 实时调试 使用putty 打开U ...
- C# Log4.Net日志组件的应用系列（一）
引言 Log4Net应该可以说是.NET中最流行的开源日志组件了.在各种项目框架中可以说是必不可少的组成部分.个人认为Log4Net有下面几个优点: 1. 使用灵活,它可以将日志分不同的等级,以不同的 ...