正文

再探display:table-cell &&左边固定、右边自适应

IP云
IP云V管理员/8 阅读
06/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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&quot ...

  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. 你听说过哪些坑人 or 赚钱的歪点子？真是骗局太多，傻子都不够用啊！

    又到了骗术揭秘时间了.各位看客您扶稳做好了,来给你深扒一些行业内幕了. 或者说一些投机的思路. 先提前写一些字,相信你们一会评论时候会用的上.直接复制,比较省力. “这年头傻逼太多,骗子明显不够用啊. ...

  2. 09day2

    多米诺骨牌 递推+高精度 [问题描述] Jzabc 对多米诺骨牌有很大兴趣,然而他的骨牌比较特别,只有黑色的和白色的两种.他觉得如果存在连续三个骨牌是同一种颜色,那么这个骨牌排列便是不美观的.现在他有 ...

  3. git reset and git checkout

    git reset --hard <commit>: 1.替换引用的指向.引用指向新的提交ID; 2.替换暂存区.替换后,暂存区的内容和引用指向的文件夹树一致; 3.替换工作区.替换后,工 ...

  4. Netbeans IDE配置

  5. 理解JavaScript继承

    原文:理解JavaScript继承 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sp ...

  6. python之模块使用

    1.入口 """ 模块测试入口 """ import show_message as sm # 导入方式一 sm.show(sm.__nam ...

  7. CentOS yum 安装获取原始rpm文件的方法

    1. 有时候 yum install 需要从几个repo下载rpm包速度很慢,不如自己能够将rpm包下载下来继续使用,比较好. 发现yum install 有两种方式能够将下载的rpm包保存下来. 方 ...

  8. 在Fedora8上安装使用ActiveMQ5&period;8

    [ActiveMQ安装] ActiveMQ在win平台的安装简单,在Linux Fedora上安装也不难,解压就可以了.以下是我总结的步骤: 第一步,从以下地址下载apache-activemq-5. ...

  9. Win32程序支持命令行参数的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 首先说说Win 32 API程序如何支持命令行参数.Win 32程序的入口函数为: int APIENTRY _tWi ...

  10. centos7防火墙的关闭

    从centos7开始使用systemctl来管理服务和程序,包括了service和chkconfig. #systemctl list-unit-files|grep firewalld.servic ...