【问题标题】：Stuck with the CSS StackLayout framework坚持使用 CSS StackLayout 框架
【发布时间】：2011-06-09 13:52:20
【问题描述】：

我正在尝试获得以下布局，我正在使用 StackLayout 框架

我无法将 Box1、Box2 和 Box 3 堆叠起来。

此外，当我将它们包装在 div 中时，每个框的标题都会给我带来麻烦。

这是我目前的代码：

 <div class="wrapper"> 
            <div id="column1" class="stack3of4"> 
                <div class="stackContent">
                    <h2>Heading</h2>
                </div>

            </div>

            <div id="column2" class="stack1of4">
                <div id="box1" class="stackContent">
                    <h2>Box 1 Heading</h2>
                </div>
                <div id="box2" class="stackContent">
                    <h2>Box 2 Heading</h2>
                </div>    
                <div id="box3" class="stackContent">
                    <h2>Box 3 Heading</h2>
                </div> 
            </div>
 </div>

这里是 CSS

.stackContent {
        display: block;
        letter-spacing: normal;
        text-align: left;
        word-spacing: normal;
     }

    .stack3of4 {
        width: 75%;
    }

    .stack1of4 {
        width: 25%;
    }

【问题讨论】：

我在您的代码中看不到任何可能与框架有关的内容。都是标准的 HTML 和 CSS。另外，.stackContent 的 CSS 规则有什么意义？这些是标准设置...如果这是由该框架生成的，最好摆脱它。

标签： css frameworks html

【解决方案1】：

以前没有使用 StackLayout，但我尝试创建一个几乎是您想要的小提琴：http://jsfiddle.net/alp82/3Hy5p/

我认为唯一的问题是两列的高度不一样。

更新

这是 HTML 标记：

<div id="page">
    <div class="stack">
        <div id="header">
        </div>
        <div id="content">
            <div id="column1" class="stack3of4">
                <div id="main" class="stackContent">
                    <h2>Heading</h2>
                </div>
            </div>
            <div id="column2" class="stack1of4">
                <div id="box1" class="stackContent">
                    <h2>Box 1 Heading</h2>
                </div>
                <div id="box2" class="stackContent">
                    <h2>Box 2 Heading</h2>
                </div>    
                <div id="box3" class="stackContent">
                    <h2>Box 3 Heading</h2>
                </div>
            </div>
            <div id="footer">
            </div>
        </div>
    </div>
</div>

【讨论】：