Top

display:tabel/table-cell布局应用

当设置 display:table-cell 激活 BFC块级格式上下文 理解请点击 理解流特性与BFC块级格式上下文

兼容性  display:table-cell IE8+ <支持ie8以上>  

1.多行行文本垂直居中显示：

设置 display: table-cell 表格单元格;  会导致margin属性值失效  vertical-align: middle;/*垂直居中*/

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>多行文本垂直居中</title>
 6     <style type="text/css">
 7          * {
 8             margin: 0;
 9             padding: 0;
10         }
11         body {
12             font: 14px/16px "microsoft yahei";
13         }
14         .content1 {
15             display: table-cell;/*表格单元格*/
16             width: 200px;
17             height: 200px;
18             /*margin: 10px;使用table-cell后margin属性失效*/
19             vertical-align: middle;/*垂直居中*/
20             border: solid 2px #ccc;
21         }
22     </style>
23 </head>
24 <body>
25     
26    <div class="content1">
27          <p>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中........</p>
28    </div>
29 </body>
30 </html>
View Code

2.平均分配单元格

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>平均分配table-cell表格单元格</title>
 6     <style type="text/css">
 7          * {
 8             margin: 0;
 9             padding: 0;
10         }
11         * {
12             box-sizing: border-box;
13         }
14         body {
15             font: 14px/16px "microsoft yahei";
16         }
17         .content {
18             padding: 10px;
19             margin: 10px;
20             border: solid #ccc 2px;
21         }
22         .content ul {
23             display: table;
24             margin: 0;
25             padding: 0;
26             width: 100%;
27             border-right: solid #ccc 1px;
28 
29         }
30         .content ul  li {
31             display: table-cell; /*表格单元格*/
32             height: 100px;
33             width: 20%;
34             padding: 10px;
35             text-align: center;/*水平居中*/
36             vertical-align: middle;/*垂直居中*/
37             border: solid #ccc 1px;
38             border-right: none;
39         }
40     </style>
41 </head>
42 <body>
43    <div class="content">
44            <ul>
45                <li><img src="./item_01.jpg" width="100px"></li>
46                <li><img src="./item_01.jpg" width="100px"></li>
47                <li><img src="./item_01.jpg" width="100px"></li>
48                <li><img src="./item_01.jpg" width="100px"></li>
49                <li><img src="./item_01.jpg" width="100px"></li>
50            </ul>
51    </div>
52 </body>
53 </html>
View Code

3.图片垂直居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片垂直居中</title>
 6     <style type="text/css">
 7         .content {
 8             display: table;
 9             min-width: 240px;
10             max-width: 600px;
11             width: 100%;
12             padding: 5px;
13             border: solid #ccc 1px;
14 
15         }
16         .img_box {
17               width: 240px;
18               height: 160px;
19               display: table-cell;
20               vertical-align: middle;
21               text-align: center;
22               background-color:#4679bd;
23 
24         }
25     </style>
26 </head>
27 <body>
28     <div class="content">
29         <div class="img_box">
30              <img src="./item_01.jpg" height="140">
31         </div>
32     </div>
33 </body>
34 </html>
View Code

4.两个盒子等高对齐

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>两个盒子等高对齐</title>
 6     <style type="text/css">
 7         * {
 8             box-sizing: border-box;
 9         }
10         .content {
11             display: table;
12             border: 1px solid #06c;
13             padding: 15px 5px;
14             max-width: 1000px;
15             margin: 10px auto;
16             min-width: 320px;
17             width: 100%;
18         }
19         .img-box{
20             width: 100px;
21             border:1px solid #ccc;
22             display: table-cell;
23             vertical-align: middle;
24             text-align: center;
25             background-color:#4679bd;
26         }
27         .text-box{
28             margin-left: 20px;
29             border: 1px solid #ddd;
30             padding: 10px;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="content">
36         <div class="img-box">
37             <img src="http://jsfiddle.net/img/logo@2x.png" width="70" alt="logo" />
38         </div>
39         <div class="text-box">
40             <p>王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</p>
41         </div>
42     </div>
43 
44 </body>
45 </html>
View Code

 

5.流体特性<弹性、响应式布局>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹性、响应式布局弹性</title>
 6     <style type="text/css">
 7         * {
 8             margin: 0;
 9             padding: 0;
10             box-sizing: border-box;
11         }
12         body {
13             font: 14px/16px "microsoft yahei";
14         }
15         .content {
16             display: table;
17             min-width: 240px;
18             max-width: 1000px;
19             width: 100%;
20             padding: 10px;
21             margin: 10px;
22             border: solid #ccc 2px;
23         }
24         .left_box {
25             float: left;
26             margin-right: 10px;
27         }
28         /*清除浮动float*/
29         .clearfix:after {
30             content: ".";
31             display: block;
32             height: 0;
33             visibility: hidden;
34             clear: both;
35         }
36         .clearfix {
37             *zoom:1;
38         }
39     </style>
40 
41     <script type="text/javascript">
42 
43         /*弹性、响应式布局弹性Test*/
44         window.onload = function(){
45             var oImg = document.getElementById('img');
46             var time = null;
47             time = setInterval(function(){
48                 animate(400);
49             },400);
50             function animate(iTarget){
51                 if (oImg.offsetWidth > iTarget ) {
52                     clearInterval(time);
53                 }
54                 oImg.style.width = oImg.offsetWidth+5 +'px';
55             }
56         }
57 
58     </script>
59 </head>
60 <body>
61    <div class="content clearfix">
62         <div class="left_box">     
63             <img src="./item_01.jpg" style="width:100px;" id="img">
64         </div>
65            <div class="right_box">
66                 <p>弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性弹性、响应式布局弹性</p>
67            </div>
68    </div>
69 </body>
70 </html>
View Code

参考资料

布局神兵利器

我所知道的几种display:table-cell的应用

posted @ 2016-09-22 10:39  Avenstar  阅读(254)  评论(0)    收藏  举报