distable:table-cell

我们在使用表格的时候，会看到表格中的单元格一般具有怎么样的特点呢？文字的垂直居中对齐，关联伸缩等等，这些都是表格单元格具有的特点。而display:table-cell可以让元素具有这些特点！

这个属性可以使得我们在布局时候实现下面三个功能：

（1）图片垂直居中于元素（在其他随笔中有记录，略）

（2）等高布局

同一行的单元格td元素高度是相等的，因此，table-cell也是具备这个特点。

eg:

<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#wrapper{display:table-row;}
#img-box{
display:table-cell;
width:150px;
vertical-align:middle;            /*垂直居中*/
text-align:center;                 /*水平居中*/
border:1px solid red;
}
#text-box{
display:table-cell;
width:200px;
border:1px solid red;
border-left:none;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="img-box"><img src="data:images/haizeil.png" alt=""/></div>
<div id="text-box"><p>这是一段文字</p></div>
</div>
</body>
</html>

　　在这个例子中，我们在左右两个盒子中都没有加上高度，但是两个盒子的高度都刚好相等，这就是自适应等高布局。高度由两者间最大的高度而决定

（3）自动平均划分元素，并且在一行显示

要让无序列表横向布局，我们通常会改变它的display属性为inline-block元素或是将其定义为浮动元素。但是我们可以利用display：table-cell来解决，并且还能自动平均划分元素。

语法：

#father{display:table;}
#son{display:table-cell;}

　　只要给父元素定义宽度，就会自动划分子元素们

补充：去除inline-block元素间距

inline-block元素之间是有间距，这会影响我们的布局，可以使用font-size：0；来去除这个情况

语法：

#father{font-size:0;}

转载于:https://www.cnblogs.com/runhua/p/6429290.html

distable:table-cell相关推荐

SAP Spartacus Table cell显示数据类型的Component决定逻辑
以SAP Spartacus B2B org unit list为例,table cell到底用什么样的Component来显示数据,取决于units.config.ts文件里定义的配置数据units ...
SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
使用 Segue 傳送選取的 Table Cell 內容到下一個 View
最近接了一個iOS的軟體開發專案, 由於是 obj-c 的初心者,在開發上難免會遇上一些看似很簡單但是卻又不知如何解決問題分享一下剛剛遇上的問題解法, 我先從server上先要了一份資料清單回來後, ...
Expandable Table Cell
2019独角兽企业重金招聘Python工程师标准>>> 实现类似腾讯爱看app的列表效果,点击列表任意一行,展开列表行,并最终成为主界面,显示列表行的详细内容. Code4App编译 ...
UITableView cell自定义视图中插入Table实现复杂界面
最近项目中需要实现如下图所示的效果: 通过界面我们断定是一个UITableView,分成三部分,第一部分是全天,第二部分是上午,第三部分是下午.最主要的是AM和PM中也是列表,这个就比较复杂了.我的做 ...
用python解析word文件（段落篇（paragraph）表格篇（table）样式篇（style））
首先需要安装相应的支持库: 直接在命令行执行pip install python-docx 示例代码如下: import docx from docx import Document #导入库 pat ...
从零开始学ios开发（十二）：Table Views（中）UITableViewCell定制
我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...
创建一个Table View
在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标在课程结束时,你将能够: 创 ...
Table——高淇JAVA300讲笔记之Guava
案例一:学生成绩表格的行和列转换 1 package com.bjsxt.others.guava; 2 3 import java.util.Map; 4 import java.util.Set; ...
ios开发学习--列表（Table）效果源码分享--系列教程4
Keyboard Avoiding 介绍: 让弹出的键盘永远遮挡不住输入框.输入框在弹出输入键盘的时候往上移动,从而不会被弹出的输入键盘遮挡住.也就是说,当弹出的键盘挡住界面某些内容时,页面会整体往上 ...

distable:table-cell

distable:table-cell相关推荐

最新文章

热门文章