1

我需要在 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”的右侧，但在垂直堆栈中。但是，这并没有发生，因为 block 的 stack-vert 显示。

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

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

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

4

1 回答 1

5

您可以通过这种方式更改 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/

于 2013-03-27T15:11:07.357 回答