css display table 自适应高度、宽度问题的解决


Posted in HTML / CSS onMay 07, 2021

定义和用法

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
可能的值

 

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示类似 table,表格前后带有换行符。
inline-table 此元素会作为内联表格来显示类似 table,表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示类似 tbody。
table-header-group 此元素会作为一个或多个行的分组来显示类似 thead。
table-footer-group 此元素会作为一个或多个行的分组来显示类似 tfoot。
table-row 此元素会作为一个表格行显示类似 tr。
table-column-group 此元素会作为一个或多个列的分组来显示类似 colgroup。
table-column 此元素会作为一个单元格列显示类似 col
table-cell 此元素会作为一个表格单元格显示类似 td 和 th
table-caption 此元素会作为一个表格标题显示类似 caption
inherit 规定应该从父元素继承 display 属性的值。

设置了display:table-cell的元素:

  • 对宽度高度比较敏感
  • 对margin值无反应
  • 响应padding属性
  • 内容溢出时会自动撑开父元素

上面实现的效果图就是左边头像部分使用了float左浮动属性,右侧使用 display: table-cell则实现了两列自适应布局。

display: table; 外层定义宽高,里面内容自适应宽高。如果子元素是div,每列宽度不是等分。所以建议子元素用li 标签

css display table 自适应高度、宽度问题的解决

.css-table {
      display: table;
      height: 2rem;
      width: 5rem;
  }
  .css-table-bg {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background-color: coral;
  }
  .css-table li {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background-color:darkkhaki;
  }
<div class="css-table">
     <div class="css-table-bg">1</div>
        <div class="css-table-bg">2</div>
        <div class="css-table-bg">3</div>
    </div>
    <div class="css-table">
        <ul> 
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clients</a></li>
        </ul>
    </div>

到此这篇关于css display table 自适应高度、宽度问题的解决的文章就介绍到这了,更多相关css display table 自适应内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
CSS3新特性详解(五):多列columns column-count和flex布局
css position fixed 左右双定位的实现代码
Apr 29 #HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
CSS3实现的侧滑菜单
CSS完成视差滚动效果
Html5通过数据流方式播放视频的实现
Apr 27 #HTML / CSS
You might like
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python实现随机漫步功能
2018/07/09 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
详解Python的循环结构知识点
2019/05/20 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python字符串的拼接方法总结
2019/11/18 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
医院后勤自我鉴定
2013/10/13 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
卖房协议书
2014/04/11 职场文书
大学计划书范文800字
2014/08/14 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python