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 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 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 函数中使用static的说明
2012/06/01 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js 窗口抖动示例
2013/09/04 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
python操作日期和时间的方法
2014/03/11 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python饼状图的绘制实例
2019/01/15 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
校运会入场式解说词
2014/02/10 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
厕所文明标语
2014/06/11 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
立志成才演讲稿
2014/09/04 职场文书
综治工作心得体会
2014/09/11 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
工程进度款催款函
2015/06/24 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python