Stuck with the CSS StackLayout framework
I am trying to get the following layout, im using StackLayout开发者_JAVA百科 framework
I am not able to get the Box1, Box2 and Box 3 stacked.
Also, the header of each box is giving me trouble, when i wrap them in divs.
Here is the code i have so far:
<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>
Here is the CSS
.stackContent {
display: block;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
}
.stack3of4 {
width: 75%;
}
.stack1of4 {
width: 25%;
}
Didn't use StackLayout before, but i tried to create a fiddle which is almost what you want: http://jsfiddle.net/alp82/3Hy5p/
I think the only problem is that the height of both columns is not the same.
Update
Here is the HTML markup:
<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>
精彩评论