#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}

table
使该元素按table样式渲染
table-row
使该元素按tr样式渲染
table-cell
使该元素按td样式渲染
table-row-group
使该元素按tbody样式渲染
table-header-group
使该元素按thead样式渲染
table-footer-group
使该元素按tfoot样式渲染
table-caption
使该元素按caption样式渲染
table-column
使该元素按col样式渲染
table-column-group
使该元素按colgroup样式渲染

display: table-cell; 自适应布局的更多相关文章

  1. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  2. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  3. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  4. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  5. display属性的表格布局相关属性

    基于CSS属性display:table的表格布局的使用   项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的tabl ...

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

    之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局(都藏在长长文章之中).这里开篇再次提一下,希望能将该技术普及下去. 典型的双栏布局类名使用如下: fix l ...

  7. display:table布局总结

    1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  8. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  9. 使用display:table使两栏布局高度相等

    两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? <!DOCTYPE html> <html> <head> <meta charse ...

  10. css display:table圣杯布局

    圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...

随机推荐

  1. hdu2852 KiKi&#39;s K-Number

    Problem Description For the k-th number, we all should be very familiar with it. Of course,to kiki i ...

  2. 小议：怎样解决创建Web Application失败问题?

    我们都知道微软建议部署SharePoint2013环境的内存至少是12GB.可是有些小型企业在部署On Premise的环境时因为预算有限,仅仅能使用内存是8GB的环境来部署SharePoint201 ...

  3. 前端project师必需知识点

    1.HTML 2,CSS 3,JavaScript 4.JQuery 5.JSON 6,HTML DOM 7.AJAX 进阶教程: 1.Bootsrap 2,sea.js 3,node.js 4.An ...

  4. LeetCode 961. N-Repeated Element in Size 2N Array (重复 N 次的元素)

    题目标签:HashMap 题目给了我们一个size 为 2N 的int array,其中有 N + 1 个唯一的 数字,让我们找出那个重复的数字. 利用hashset,把每一个数字存入,一旦发现有重复 ...

  5. 关于C语言指针的一些新认识（1）

    Technorati 标签: 指针,数组,汇编,C语言 前言 指针是C语言的精华,但我对它一直有种敬而远之的感觉,因为一个不小心就可能让你的程序陷入莫名其妙的麻烦之中.所以,在处理字符串时,我总是能用 ...

  6. C++11系列-什么是C++11

    什么是C++0x? C++0x是C++最新标准标准化过程中的曾用名,在这一系列文章中我们将介绍最新标准添加的一系列新的语言特性.在2011年9月份,C++0x正式由官方发布并命名C++11,现在很多编 ...

  7. bzoj2194

    http://www.lydsy.com/JudgeOnline/problem.php?id=2194 卷积... 卷积并不高深,其实卷积就是两个多项式相乘的系数,但是得满足一点条件,就是f[n]= ...

  8. MySQL 1366错误解决办法

    MySQL 1366错误大致描述如下 SQL Error: 1366: Incorrect string value: "xE8xAFxA6xE7xBBx86-" for colu ...

  9. BZOJ 4811 树链剖分+线段树

    思路: 感觉这题也可神了.. (还是我太弱) 首先发现每一位不会互相影响,可以把每一位分开考虑,然后用树链剖分或者LCT维护这个树 修改直接修改,询问的时候算出来每一位填0,1经过这条链的变换之后得到 ...

  10. 344 Reverse String 反转字符串

    请编写一个函数,其功能是将输入的字符串反转过来.示例:输入:s = "hello"返回:"olleh"详见:https://leetcode.com/probl ...