css table-cell自動補充元素問題

標籤：問題   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自動補充元素問題