table-cell布局

dackel 发布于2019-08-28 18:21 / 817人阅读

摘要：这时，那些丢失的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名对象，使其符合的三层嵌套关系。

    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内部进行换行。

GPU云服务器云服务器 div布局布局html 排版布局拖动布局帧布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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