CSS:Table-cell属性的妙用让div也能享受table定位的好处_ Div+Css教程-查字典教程网
CSS:Table-cell属性的妙用让div也能享受table定位的好处
CSS:Table-cell属性的妙用让div也能享受table定位的好处
发布时间:2017-01-07 来源:查字典编辑
摘要:从前在页面布局的时候,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标签一样。

效果图:

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类