display:table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:table</title>
</head>
<body>
<h1>--当有table-cell不设置宽高的时候会自动填充剩余空间--</h1>
<div style="display: table;background-color: black;width: 500px;height: 400px">
<!--当有cell不设置宽高的时候会自动填充剩余空间-->
<div style="display: table-cell;background-color: red;">
</div>
<div style="display: table-cell;background-color: blue;width: 300px;height: 100px">
</div>
</div>
<h1>--高度设置在table-cell中是没有作用的，会填充满整个cell--</h1>
<div style="display: table;background-color: black;width: 500px;height: 400px">
<div style="display: table-cell;background-color: red;height: 200px">
</div>
<div style="display: table-cell;background-color: blue;width: 300px;height: 100px">
</div>
</div>
<h1>--table-row,注意，多个row会与最宽的一个table-cell一致--</h1>
<div style="display: table;background-color: black;width: 500px;height: 400px">
<div style="display: table-row">
<div style="display: table-cell;background-color: red;height: 200px">
</div>
<div style="display: table-cell;background-color: blue;width: 300px;height: 100px">
</div>
</div>
<div style="display: table-row">
<div style="display: table-cell;background-color: green;width: 400px">
</div>
<div style="display: table-cell;background-color: pink;">
</div>
</div>
</div>
<h1>--vertical-align、text-align结合display:table--</h1>
<p>vertical结合行内元素的时候是将连续的行内元素对齐，当结合table-cell的时候则是table-cell的之中的内容位置</p>
<div style="background-color: black;width: 500px;height: 400px;display: table;">
<div style="display: table-row;">
<div style="display: table-cell;background: yellow;vertical-align: middle;text-align: center">
<h1>Content1</h1>
<h1>Content2</h1>
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;background: green;vertical-align: middle;text-align: center">
<h1>Content</h1>
</div>
</div>
</div>
<br/>
<div style="display: table;background-color: black;width: 400px;height: 400px;">
<div style="display: table-row">
<div style="display: table-cell;text-align: center;vertical-align: middle;">
<div style="background-color: red;width: 200px;height: 200px;display: inline-block">
<div style="display: table;width: 100%;height: 100%">
<div style="display: table-row;">
<div style="display: table-cell;text-align: center;vertical-align: middle;">
<div style="width: 100px;height: 100px;background-color: blue;display: inline-block"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
网友评论