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