css - 为什么父DIV调整大小，而子元素仍有空间向下移动？

Question

很抱歉，如果这个问题看起来重复，但这些解释在某种程度上与我正在寻找的不同。

我有一个 DIV即显示 table .它有两个 DIV作为细胞也有自己的 DIV在里面。

    <div class="theTable">
     <div class="theRow">
      <div class="cell1">
       <div class="cell1Content">
        cell one content
       </div>
      </div>
      <div class="cell2">
       <div class="cell2Content">
        cell two content
       </div>
      </div>
     </div>
    </div>

现在，当我以任何方式(例如书写或更改属性)放大这些单元格之一的内容时(例如 cell2 )，而不是从向下放大内容，并填充父级的区域DIV(这是一个单元格)，发生的情况是父级 DIV实际上从顶部展开。这种行为是不希望的。我想要 parent DIV保持相同大小，内容从底部(向下)调整大小。我知道这可以通过使用 position:relative, top:2em 来实现，但这不是我打算做的，因为我不想破坏 document 的流程。 ，而是一个关于如何解决这个问题的简单答案。与上述情况一样，CSS文件是这样的:

.theTable {display:table}
.theRow {display:table-row;} 
.cell1 {display:table-cell}
.cell2 {display:table-cell}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}

如果您更改最后一行 (margin-top:0em)，您会看到，改变大小的不仅是子项，还有父项。我不明白为什么？对此可以做些什么？

Answer 1

那么你想要的是细胞从底部开始向上生长吗？

这样的事情可以解决它: http://jsfiddle.net/7y19n8eh/

.theTable {display:table}
.theRow {display:table-row;} 
.cell1 {display:table-cell;vertical-align: bottom}
.cell2 {display:table-cell;vertical-align: bottom}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}

我所做的是将 vertical-align:bottom 添加到单元格中。vertical-align 属性设置元素的垂直对齐方式，并与所有主流浏览器兼容。