冷门布局方法 tabel-cell 的可行性研究

用户1097444

发布于 2022-06-29 15:06:06

3820

发布于 2022-06-29 15:06:06

display:table-cell 属性简介

display：table-cell；会使元素表现的类似一个表格中的单元格 td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些 CSS 属性，使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对 margin 值无反应，可以响应 padding 的设置，表现几乎类似一个 td 元素。

小结：

不要与 float：left; position:absolute; 一起使用。
可以实现大小不固定元素的垂直居中。
margin 设置无效，响应 padding 设置。
对高度和宽度高度敏感。
不要对 display：table-cell 使用百分比设置宽度和高度。

下面介绍几个 table-cell 的应用：

1. 高度不固定内容水平垂直居中

文字水平垂直居中： <style> .table-wrap{ display: table-cell; height: 200px; width: 100px; padding: 20px; vertical-align: middle; text-align: center; border: 1px solid red; } </style> <div class="table-wrap"> 我是一大推文字，我想要垂直居中，这是省略这是省略这是省略这是省略 </div>

关键在于设置了 display:cell; 后，vertical-align:middle 使文字内容垂直居中。

图片水平垂直居中：

<style>
.outer{display: table;width: 100%;}
.table-wrap{
    display: table-cell;
    height: 200px;            
    padding: 20px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid red;
    }
</style>
<div class="outer">
    <div  class="table-wrap">
        <img src="http://jsfiddle.net/img/logo@2x.png" alt="logo" />
    </div>
</div>

中间的图片会随着外层容器的大小而自动水平垂直居中，其实原理和文字水平垂直居中一模一样。

2. 多列布局实现文字水平方向对齐

<style>
    *{margin: 0;padding: 0;}
    .outer{display: table;width: 90%;margin: 10px  auto;
        padding: 10px; border: 1px solid green;}
    .table-left,.table-right{
        display: table-cell;            
        width: 20%;
        border: 1px solid red;
    }
    .table-center{
        height: 100px;
        background-color: green;
    }
</style>
<div class="outer">
    <div class="table-left">
        <p>我是左边</p>
    </div>
    <div  class="table-center">
        我是中间
    </div>
    <div class="table-right">
        <p>我是右边</p>
    </div>
</div>

可以看到左右两边以及中间部分的文字，虽然它们在不同的容器中，且不用管当前列容器设置的 padding 是多少，它们在水平方向上是绝对对齐的。

3. 等高布局

<style>
        *{margin: 0;padding: 0;}
        .outer{display: table;width: 90%;margin: 10px  auto;
            padding: 10px; border: 1px solid green;}
        .table-left{
            display: table-cell;            
            width: 150px;
            padding-top: 20px;
            border: 1px solid red;
            vertical-align: top;
            text-align: center;
        }

        .table-right{            
            border: 1px solid yellow;
            background-color: green;
            margin-left: 20px;
            padding: 10px;
        }
    </style>
    <div class="outer">
        <div class="table-left">
            <img src="http://jsfiddle.net/img/logo@2x.png" alt="logo" />
        </div>
        <div class="table-right">
            <span>这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字。。。。。</span>
        </div>
    </div>

拉伸宽度，会发现左右两侧始终保持高度一致。

4. 均分列表布局

<style>
    *{margin: 0;padding: 0;}
    .table-wrap{
        display: table;
        width: 80%;
        margin: 20px auto;
        border: 1px solid red;
        padding: 20px;
    }
    .table-wrap li{
        display: table-cell;
        padding: 20px;
        border: 1px solid green;
        border-right: none;
        text-align: center;
        vertical-align: middle;
    }
    .table-wrap li:last-child{
        border-right: 1px solid green;
    }
</style>
<ul class="table-wrap">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

以前进行类似的布局我都会使用 display:inline-block; 的方式，需要在 ul 上设置 font-size: 0; 来清除每一个小块之间的间隙，还需要为每一个项写一个百分比宽度。使用 table-cell 后，不需要写百分比宽度，也不需要清除小块间的间隙。而且添加额外项时，会自动平均分配宽度。

5. 两栏自适应布局

即左侧宽度固定，右侧自动分配剩余空间：

<style>
        * {
            box-sizing: border-box;
        }
        .content {
            display: table;
            border: 1px solid #06c;
            padding: 15px 5px;
            max-width: 1000px;
            margin: 10px auto;
            min-width: 320px;
            width: 100%;
        }
        .left-box{
            float: left;            
            background-color: green;
            margin-right: 10px;
            padding-top:5px;            
        }
        .right-box{
            display: table-cell;
            border: 1px solid red;
            padding: 10px;
            vertical-align: top;
        }
    </style>
    <div class="content">
        <div class="left-box">
             <img src="http://jsfiddle.net/img/logo@2x.png" alt="logo" />
        </div>
        <div class="right-box">
            <span>这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字。。。。。</span>
        </div>
    </div>

左侧宽度固定，右侧宽度自适应。布局原理也可以用 BFC 来解释，左侧和右侧都是 BFC 块，BFC 块是不会和 float 块发生重叠的。

6. 诡异的百分比宽高

使用 table-cell 有一个让人很抓狂的地方，那就是他的宽高是不能使用百分比设置的，具体的原因我一直没有找到，只能理解为这是这个属性的特性。希望有知道的老铁告知一声。下面说一说关于百分比宽高的结论：1. 高度设置百分比无效，只与内容的实际高度有关 2. 宽度设置百分比分两种情况， * 一种是父容器设置 display:table;，这种情况下分两种情况 1. 没有其他元素 table-cell 的容器会获得它前面的元素在水平方向分配完的全部宽度。2. 在其前面有其他元素时，其宽度可以按照 display:inline-block 的元素来计算，也就是宽度会小于等于其百分比计算值的宽度的 * 在父容器未设置 table时，width 的百分比值可以理解为内容区宽度加上 border-box 左右两边到父容器边框的距离，也就是 width 的百分比值越小，其所占据的宽度越大如果你对这个问题比较感兴趣，可以看看这个问答。真的是匪夷所思啊。