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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
flex弹性布局详解
Mar 20 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
初识Laravel
2014/10/30 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python iter()函数用法实例分析
2018/03/17 Python
python计算日期之间的放假日期
2018/06/05 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python实现结构体代码实例
2020/02/10 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
企业标语口号
2014/06/10 职场文书
车贷收入证明范本
2014/09/14 职场文书
校长四风对照检查材料
2014/09/27 职场文书
实习介绍信模板
2015/01/30 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
开国大典观后感
2015/06/04 职场文书
Python合并pdf文件的工具
2021/07/01 Python
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技