今天小编跟大家讲解下有关CSS:Table-cell属性的妙用让div也能享受table定位的好处 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关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标签一样。 效果图:来源:爱蒂网