css table-cell自动补充元素问题
最近在看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对齐的效果,同时不会跑到下一行。
////////////!!!!!!!!!!!!!被自己蠢死了
我的代码如上
下面的是源码
有什么区别?区别在于我为了缩进的好看,将<span>放到了下一行,而换行会被浏览器识别位空白符,也是占据单位的!!!所以红字信息因为absolute的属性,会留在原文档流的上方,而原文档因为空白符的影响,流入到了input框的下方,这也是很多时候,为了结构好看将img元素写成几列
像这样
<img>
<img>
<img>
你计算出来的宽度刚刚好能够放三个图片,最后一个图片却跑到了下一行,就是因为换行符被认为是空白符,占据空间(img是replace元素----可以理解为带width。height属性的inline类型),对inline元素影响很大。
那么,如果想要代码美观,还不换行怎么办呢?将元素position设置为float,达到砌砖头的效果(不过浮动是魔鬼,慎用)