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 &&左边固定、右边自适应的更多相关文章

  1. HTML布局之左右结构，左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  2. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  3. css-两个div并排，左边宽度固定右边自适应的布局 的实现方法

    <div class= "container"> <div class="left"></div> <div clas ...

  4. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  5. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  6. css网页布局 --- 左边固定，右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  7. table左边固定-底部横向滚动条

    是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表 ...

  8. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  9. 移动端list布局，左边固定，右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 新浪微博Android开发获取Access_token的步骤

    最近学习Android的开发,学完书本之后,决定研究如何开发一个微博客户端来实践.第一步当然是用户授权.但是新浪开放平台的说明实在写得不太清楚,用GOOGLE+研读的方法,总算是实验成功了. 这里有别 ...

  2. Git出现SSL connect error的解决办法

    最近在使用Go开发项目中,因为需要安装一个Package,所以使用了go get命令 ,然后就出现git clone ... SSL connect error的错误: 出现这种错误有可能是nss的版 ...

  3. SQL语句统计错误率

    2018年的第一篇博客就以此作为开端吧 :D 最近在项目中碰到需要统计类似错误率之类的需求,原本这功能是之前做的,但是最近测的时候发现出了点问题,显示的结果不对.这就比较尴尬了... 于是就进行deb ...

  4. XJOI 3629 非严格次小生成树(pqq的礼物)

    题目描述: 有一天,pqq准备去给×i×准备礼物,他有一些礼品准备包装一下,他用线将这些礼物连在一起,不同的礼物因为风格不同所以连接它们需要不同价值的线.风格差异越大,价格越大(所以两个礼物之间只有一 ...

  5. BZOJ 1878 hh的项链（简单莫队）

    Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一 段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此他的项链变得 ...

  6. Mysql简介与编译安装

    ==========MYSQL工作原理图: 1>数据库简介:简单的说数据库(database)就是一个存储数据的仓库,它将数据按照特定的规律存储到磁盘上,通过数据库管理系统,能够有效的管理存储在 ...

  7. arcgis android 中shapefile的加载

    前言 本文为大家分享arcgis android 中shapefile的加载,默认你有java环境,懂一定的android基础知识,默认你已经安装android studio.如缺乏以上环境和知识,请 ...

  8. tensorflow使用

    近期在工作中使用tensorflow训练神经网络模型,使用方法简要记录. 环境配置

  9. [转]Control的Invoke和BeginInvoke

    转自:Control的Invoke和BeginInvoke  作者:Kuffy Wang 近日,被Control的Invoke和BeginInvoke搞的头大,就查了些相关的资料,整理如下.感谢这篇文 ...

  10. MAVEN 编译打包时报“找不到符号”cannot find symbol 的处理方法总结

    http://www.cnblogs.com/Starshot/p/7441075.html