table-cell布局

dackel 發布于2019-08-28 18:21 / 814人閱讀

摘要：這時，那些丟失的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名對象，使其符合的三層嵌套關系。

    html:
    
        測試
        測試
        測試
        測試
    
    
    css:
    .box {
        width: 100%;
        display: table;
    }
    .item {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .w-50 {
        width: 50px;
    }
    .w-120 {
        width: 120px;
    }
    .w-150 {
        width: 150px;
    }

大家可以打開控制臺查看相應元素的屬性。這種方式可以很好的模擬flexbox布局。IE8+支持。

匿名表格元素

按常規的標簽關系應該是table→table-row→table-cell.

缺少的表格元素會被瀏覽器以匿名方式創建。

css2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時，那些"丟失"的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table-cell的三層嵌套關系。

即如果我們為元素使用"display:table-cell;"屬性，而不將其父容器設置為"display:table-row;"屬性,瀏覽器會默認創建出一個表格行，就好像文檔中真的存在一個被聲明的表格行一樣。

所以在上面的table-cell的父元素直接聲明樣式為display:table;

display:table-cell下連續單詞字符換行問題修復bug

對于某個table-cell字符長度太長得情況下

    {
        display: table;
        width: 100%;
        table-layout: fixed; (用來顯示表格單元格、行、列的算法規則)
        word-wrap: break-word;
    }

table-layout屬性用來顯示表格單元格、行、列的算法規則

table-layout: automatic
父元素設定以后，每個table-cell的寬度是根據自身的內容來定的，因此如果自身的內容過長的話，會導致內容不換行，而將table-cell的寬度撐開很大

table-layout: fixed
父元素設定以后，水平布局僅取決于表格的寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。因此一旦table-layout: fixed屬性設定以后,table-cell的寬度就確定下來，這個時候使用word-wrap: break-word屬性，即可在table-cell內部進行換行。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111193.html

css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

lijinke666 2019-08-29 11:22 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

hedge_hog 2019-08-20 11:16 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

kun_jian 2019-08-01 15:45 評論0 收藏0
總結下常見布局解決方案

摘要：總結了幾種常見的頁面架構布局方案居中布局水平居中垂直居中水平垂直多列布局自適應布局等寬布局等高布局居中布局水平居中水平居中布局垂直居中水平垂直居中多列布局自適應布局定寬自適應總結了幾種常見的頁面架構布局方案1.居中布局 a.水平居中 b.垂直居中 c.水平垂直 2.多列布局 a.自適應布局 b.等寬布局 c.等高布局居中布局水平居中 demo 1. inline...

newtrek 2019-08-30 15:53 評論0 收藏0
CSS常見布局解決方案

摘要：到此，我們了解常見的布局解決方案，這些只是參考，一樣的布局實現方式多種多樣。主要就使用從很久很久以前起，我們就拋棄了布局頁面，但是異常強大等屬性目前兼容性較差傲嬌的程序員應該放棄太低版本的瀏覽器轉自常見布局解決方案水平居中布局 1.margin + 定寬 Demo .child { width: 100px; margin: 0 auto; } ...

Big_fat_cat 2019-08-29 12:41 評論0 收藏0