我正在尝试获得以下布局,我正在使用 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%;
}
最佳答案
之前没有使用过 StackLayout,但我尝试创建一个几乎是您想要的 fiddle :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>
关于css - 坚持使用 CSS StackLayout 框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6293856/