CSS:Table-cell属性的妙用让div也能享受table定位的好处

上天赐予了你宝贵的生命,必定要让你在一生中,坚持,奋斗到最后一秒,燃烧尽生命的火焰。
从前在页面布局的时候,table被大量的使用,其中一个好处便是元素可以轻松的定位,不会出现什么窜行的问题。你要是用div的话,一会inline一会float很是蛮烦。怎么样才能在使用div的时候也能享受的table定位的好处呢?下面举个例子:
复制代码
代码如下:

<!--HTML --!>
<div id="parent">
<div id="c1"></div>
<div id="c2"></div>
</div>

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

<span style="white-space:pre"> </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标签一样。

效果图:

到此这篇关于CSS:Table-cell属性的妙用让div也能享受table定位的好处就介绍到这了。有些人生来是为了赶路的…完成学业事业结婚生子,一切有条不紊按部就班,匆匆忙忙在前三十年生命里就完成了大部分任务,再用剩下的时间去修补与忍耐,并学着苦中作乐。而有些人的人生任务可能只完成了一半,但他们却看了别人几辈子才能看到的风景,你不能说任何一种选择是错。真的,自己开心就好。更多相关CSS:Table-cell属性的妙用让div也能享受table定位的好处内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
让你的HTML5&CSS3网站在微软的浏览器中也能运行

你知道吗?CSS样式表也能挂网页木马

详解在table设置max-width以及min-width兼容问题和如何解决方案

用CSS3和table标签如何实现一个圆形轨迹的动画的示例代码

contenteditable元素的placeholder输入提示语设置方法