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

我试着让两个div一个接一个，就像这样：

这个：

.桌子{
显示：表格；
}
.1分部{
显示：表格单元格；
垂直对齐：中间对齐；
}
.第2分部{
显示：表格单元格；
垂直对齐：底部对齐；
}
顶部
底部

放置一个包装器元素并显示：表行；在每个要隔离的表单元格元素中。这将把单元格堆叠在不同的行中，一行在另一行之上

不要在布局中使用表格。。。原因如下：

试试这个：

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>

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

---

当我拉小提琴的时候。。。。我想出了这个（没有css）

苏格拉底（这应该在他的头顶上）

谢谢，表行就是答案！我觉得忘记这个lol很愚蠢。我会看看你推荐的链接，再次感谢。如果你只是处理基本元素，你不应该使用表格。如果需要的话，试着只在图表/方框中使用表格。这似乎是正确的答案。现在，表格已经不再是主流。感谢您的尝试，我知道我可以这样做，但在我的特定情况下，它不起作用，因为我需要div也垂直对齐，而不仅仅是水平对齐。这是我的错误，当我创建小提琴时，我没有指定这一点。感谢您的尝试，但我需要将图像与div类表的底部对齐。

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

<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>