多级水平/垂直＆＃34;堆叠面板＆＃34;在HTML中

Question

我需要在HTML中呈现任意内容（表单元素，文本，图像）。布局方面，XAML的“堆栈面板”的概念接近我正在寻找的。我希望垂直布局的一些内容，以及一些水平放置的内容。所以，我希望HTML看起来像这样：

<div class="stack-vert">
    <div class="stack-vert">
        <div class="content">Vert 1</div>
        <div class="content">Vert 2</div>
    </div>
    <div class="stack-horz">
        <div class="content" style="width: 50px; height: 75px;">Horz 1</div>
        <div class="content" style="width: 50px; height: 50px;">Horz 2</div>
        <div class="content" style="width: 100px; height: 200px;">Horz 3</div>
        <div class="stack-vert">
            <div class="content">Horz 4, Vert 1</div>
            <div class="content">Horz 4, Vert 2</div>
        </div>
    </div>          
    <div class="stack-vert">
        <div class="content">Vert 3</div>
        <div class="content">Vert 4</div>
    </div>
</div>

硬编码的宽度和高度就是模拟不同尺寸的内容。我有正确布局一级水平，垂直的CSS：

DIV.stack-vert
{
    border: solid thick red;
}

DIV.stack-horz
{
    border: solid thick blue;
}

DIV.content
{
    padding: 5px;
    background-color: grey;
    margin: 5px;

}

DIV.stack-horz DIV.content
{
    display: inline-block;
}

此HTML和CSS呈现如下：

正如你所看到的，我希望实现的是“Horz 4，Vert 1”和“Horz 4，Vert 2”渲染到“Horz 3”的右侧，但是在垂直堆叠中。但是，这不会发生，因为块的堆栈顶部显示。

如何使用HTML / CSS以及任意深度的容器实现“堆栈面板”，例如任意内容部分的布局？

注意：理想情况下，我想使用“原始”HTML / CSS来解决这个问题，但我会考虑基于框架的解决方案，例如使用jQuery。

编辑＃1：@ Aequanox的答案很接近，但它不支持IE 9. IE 9支持是必不可少的，因为我的大多数用户都在浏览器上（它是一个内部应用程序）。

Answer 1

你可以用这种方式改变CSS

DIV.stack-vert
{
    border: solid thick red;
    overflow:hidden;
}

DIV.stack-horz
{
    border: solid thick blue;
    overflow:hidden;
}

DIV.content
{
    padding: 5px;
    background-color: grey;
    margin: 5px;

}

DIV.stack-horz > DIV.content
{
    float:left;
}

请在此处查看示例：http://jsfiddle.net/3e6AY/