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，达到砌砖头的效果（不过浮动是魔鬼，慎用）

转载于:https://www.cnblogs.com/ZackBee/p/6753652.html