码迷,mamicode.com
首页 > Web开发 > 详细

css table-cell自动补充元素问题

时间:2017-04-23 20:15:41      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:问题   http   方法   logs   post   cell   dem   删除   images   

  最近在看imooc上的demo,然而今天碰到一个很头疼的问题。

先上源码,上面的是我的,下面的是源码。

源码链接
技术分享技术分享

 

代码几乎相同,body等我用的是百分比不过应该不影响。

用absolute属性定位却到了下一行(很疑惑为什么跟随性没有起作用)排查后发现是.regist-cell设置成display: table-cell;在源码中这样使用是为了实现对其的效果(下方按钮与input框)然而我使用相同的方法却到了下一行;

讲该属性删除,效果恢复正常(不清楚为什么源码这样可以,机制是什么)

在网上找到了元素设定table-cell后的的浏览器补全机制

原文章

简单地总结一下,table->[table-row-group(table-column-groun)](此处可缺省)->table-row(table-column)->table-cell是一套结合使用的(相当于HTML中的table,tr,td,col等标签),浏览器会自动补充完整,具体方法可以看原文,总结起来就是,当前元素设立了table的某属性,若子元素不完整则填充匿名子元素,并且匿名子元素与其他子元素成为table中相应的内容,当前元素的父元素无table相关属性同理。

然后我将.regist-cell中的display:table-cell改为table-row,子元素自动变成table中的cell,这样能够实现button对齐的效果,同时不会跑到下一行。

css table-cell自动补充元素问题

标签:问题   http   方法   logs   post   cell   dem   删除   images   

原文地址:http://www.cnblogs.com/ZackBee/p/6753652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!