手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS:Table-cell属性的妙用让div也能享受table定位的好处
CSS:Table-cell属性的妙用让div也能享受table定位的好处
摘要:从前在页面布局的时候,table被大量的使用,其中一个好处便是元素可以轻松的定位,不会出现什么窜行的问题。你要是用div的话,一会inlin...

从前在页面布局的时候,table被大量的使用,其中一个好处便是元素可以轻松的定位,不会出现什么窜行的问题。你要是用div的话,一会inline一会float很是蛮烦。怎么样才能在使用div的时候也能享受的table定位的好处呢?下面举个例子:

<!>

<div id="parent">

<div id="c1"></div>

<div id="c2"></div>

</div>

一个父容器,装有两个子容器,在c1宽度不确定的情况下,如何让c2填充满父容器呢?可以这样:

<span> </span>#parent{

width: 90%;

margin: 50px auto;

border: #333333 solid 1px;

padding: 10px;

display: table;

}

#c1{

height: 50px;

background: #f30;

width: 35%;

display: table-cell;

}

#c2{

height: 50px;

background: #03f;

display: table-cell;

}

将父容器的display指定为table,这样浏览器便会把parent当作一个table对待,然后向table中添加元素,元素具有的效果就会和直接使用td标签一样。

效果图:

1

【CSS:Table-cell属性的妙用让div也能享受table定位的好处】相关文章:

CSS教程:CSS的Background Images背景图片

CSS的position属性在DIV层中的应用

CSS元素的class与ID命名常用关键字

10条影响CSS渲染速度的写法

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

相同元素不同结构重复定义的问题

学习CSS的伪类

下拉菜单select样式设置(兼容IE6/IE7/IE8/火狐)

纯CSS做的带开关的台灯

Discuz!X“#145 - Table '.pre1_common_stat' is marked as crashed a

精品推荐
分类导航