布局神器display:table-cell

Posted 最骚的就是你

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了布局神器display:table-cell相关的知识,希望对你有一定的参考价值。

元素两端对齐

    第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做:

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
* {
    box-sizing: border-box;
}
.content {
    display: table;
    border1px solid #06c;
    padding15px 5px;
    max-width1000px;
    margin10px auto;
    min-width320px;
    width100%;
}
.box {
    width100px;
    height100px;
    border1px solid #ccc;
    text-aligncenter;
    display: inline-block;
    font-size40px;
    line-height100px;
}
.right {
    text-alignright;
    displaytable-cell
}
.left {
    text-alignleft;
    displaytable-cell
}

 

1
2
3
4
5
6
7
8
<div class="content">
    <div class="left">
        <div class="box">B</div>
    </div>
    <div class="right">
        <div class="box">A</div>
    </div>
</div>

  

自动平均划分每个小模块,使其一行显示

第二个案例我们先看看图:

        遇到上面这种布局,一般会用float来做,或者把每个li设置成display:inline-block;来做,并且都要给他们设置一个宽度,而且最痛苦的是5个li如果你设置width:20%;他们一定会掉下来,如果li都设置成display:table-cell;就不会出现这种情况,即使不设置宽度他们也会在一行显示,你在加多一行他也不会掉下来,依旧会在一样显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
    box-sizing: border-box;
}
 
.content {
    display: table;
    border1px solid #06c;
    padding15px 5px;
    max-width1000px;
    margin10px auto;
    min-width320px;
    width100%;
}
.content ul {
    display: table;
    width100%;
    padding0;
    border-right1px solid #ccc;
}
 
.content ul li {
    displaytable-cell;
    border1px solid #ccc;
    text-aligncenter;
    height100px;
    border-rightnone;
    line-height100px;
}

  

1
2
3
4
5
6
7
8
9
<div class="content">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

  

图片垂直居中于元素

 

1
2
3
4
5
<div class="content">
    <div class="img-box">
        <img src="http://jsfiddle.net/img/logo@2x.png" alt="logo" />
    </div>
</div>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
    box-sizing: border-box;
}
 
.content {
    display: table;
    border1px solid #06c;
    padding15px 5px;
    max-width1000px;
    margin10px auto;
    min-width320px;
    width100%;
}
.img-box{
    height150px;
    width100px;
    border:1px solid red;
    displaytable-cell;
    vertical-alignmiddle;
    text-aligncenter;
    background-color:#4679bd;
}

  

两box实现等高对齐

        上图中的左侧的box的高度始终跟随右侧的box的高度变化而变化

1
2
3
4
5
6
7
8
<div class="content">
    <div class="img-box">
        <img src="http://jsfiddle.net/img/logo@2x.png" width="70" alt="logo" />
    </div>
    <div class="text-box">
        <span>王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。</span>
    </div>
</div>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
* {
    box-sizing: border-box;
}
.content {
    display: table;
    border1px solid #06c;
    padding15px 5px;
    max-width1000px;
    margin10px auto;
    min-width320px;
    width100%;
}
.img-box{
    width100px;
    border:1px solid red;
    displaytable-cell;
    vertical-alignmiddle;
    text-aligncenter;
    background-color:#4679bd;
}
.text-box{
    margin-left20px;
    border1px solid #ddd;
    padding10px;
}

  

上面的案例不对右侧的box设置display:table-cell,只对左侧设置,所以就会出现左侧跟随右侧高度变化而变化。

如果要实现不管两个box哪个高度产生变化另一个就跟随,只需要把右侧的box也设置成display:table-cell就可以实现了。

 

弹性、响应式布局

1
2
3
4
5
6
7
8
9
<div class="content">
        <div class="left-box">
            <img src="https://www.google.com.hk/images/srpr/logo11w.png" width="70" alt="logo" /> 
        </div>
         
        <div class="right-box">
            <span>王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年,有一天他们相遇了,然后发现都对对方一见钟情后,所以就愉快的生活在了一起。。。。。</span>
        </div>
    </div>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
* {
    box-sizing: border-box;
}
.content {
    display: table;
    border1px solid #06c;
    padding15px 5px;
    max-width1000px;
    margin10px auto;
    min-width320px;
    width100%;
}
.left-box {
    float:left;
    margin-right10px;
    padding-top:5px;
}
 
.right-box {
    displaytable-cell;
    padding10px;
    border1px solid #ccc;
    margin-right10px;
    vertical-aligntop;
}

  

移动端布局因为有display:box这等属性,所以table-cell相对就排不上什么大用场,不过在移动端你要用table-cell也不是不可以,根据自己对属性的理解去使用就可以了。

以上是关于布局神器display:table-cell的主要内容,如果未能解决你的问题,请参考以下文章

布局神器display:table-cell

display:table-cell

是否可以使 display:table-cell 布局响应?

display: table-cell; 自适应布局

display:table-cell自适应布局下连续单词字符换行——张鑫旭

display:table 表格布局