与CSS StackLayout框架

Question

我试图让下面的布局，使用im 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%; 
    } 

Answer 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>