如何用表格单元格在另一个上面创建div？

Question

我试图让两个div成为另一个div，就像这样：

fiddle：

<!-- CSS -->
.table {
  display:table;
}
.div1 {
  display:table-cell;
  vertical-align:middle;
}
.div2 {
  display:table-cell;
  vertical-align:bottom;
}
<!-- /CSS -->
<div class="table">
  <div class="div1">
    Top
  </div>
  <div class="div2">
    Bottom
  </div>
</div>

Answer 1

放一个带有display：table-row的包装元素;在要隔离的每个table-cell元素中。这会将单元格堆叠在不同的行中，一个在另一行的顶部。

不要在表格中使用表格......这就是原因：Why not use tables for layout in HTML?

Answer 2

当我做小提琴时....我想出了这个（没有css）

<div>
    <div align='center'>
        <div>
            Socrates (this should be on top of his head)
        </div>
        <div>
            <img src="http://www.mrdowling.com/images/701socrates.png"/>
        </div>
    </div>
</div>

Answer 3

试试这个：

<强> HTML

<div class="table">
    <div class="align-middle">
        Socrates (this should be on top of his head)    
        <img src="http://www.mrdowling.com/images/701socrates.png"/>
    </div>
</div>

<强> CSS：

.table {
    display:table;
}
.align-middle {
    display:table-cell;
    vertical-align:left;
}