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实际上从顶部开始扩展。此行为是不希望的。我希望父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属性设置元素的垂直对齐方式，并且与所有主流浏览器兼容。

为什么在子元素仍有向下移动空间的同时，父DIV会调整大小？

1 个答案: