垂直對齊Zurb基金會的內容

Question

我正在用Zurb基金會構建網站。我想包括一個DIV。這個div將有兩列。左欄將顯示圖像。第二欄將保留一個段落和一個按鈕。我想讓按鈕垂直對齊網格的底部。換句話說，我想讓我的按鈕底部與我的圖像底部對齊。目前，我正嘗試以下操作：

<div class="sample"> 
    <h1>This is the title</h1> 
    <ul class="inline-list"> 
    <li>John Smith</li> 
    <li>October 12, 2013</li> 
    </ul> 

    <div class="row"> 
    <div class="large-5 columns"> 
     <div> 
     <img src="/images/paper.jpg" style="width:100%;" /> 
     </div> 
    </div> 

    <div class="large-7 columns" style="background-color:yellow;"> 
     <p>A paragraph will go here</p> 

     <a class="button small" href="[someUrl]"> 
     <span>keep reading</span>&nbsp; 
     <span class="icon-arrow-right5" style="font-weight:lighter; vertical-align:middle;"></span> 
     </a> 
    </div> 
    </div> 
</div> 

垂直與圖像的左側欄底部對齊，我不能得到「繼續閱讀」按鈕。 Zurb基金會有沒有辦法做到這一點？如果是這樣，怎麼樣？

Answer 1

完成此操作最簡單的方法是將兩個容器（一個用於圖像，另一個用於文本）相鄰放置，並在文本容器內放置一個段落文本框和一個按鈕框。

爲段落框設置一個最大高度，該高度大約爲圖像高度的70-80％（取決於段落框的寬度）並放置一個溢出：hidden;在它的情況下，你的文本運行很長，你不希望你的佈局中斷。將按鈕放置在固定高度段落框下面，並帶有一個簡單的頂部邊距，您應該很好。

你可以對齊我用Zerb的網格所做的這些框來完成這個任務，但Zerb的網格只有水平列：你必須添加這些垂直對齊來實現你的目標。

檢查代碼在這裏： http://jsfiddle.net/73fct/2/

HTML：

<div class="container"> 
    <div class="image-box"> 
     <img src="http://nutritionwonderland.com/wp-content/uploads/2010/10/bee-emrank-flickr-300x300.png" width="300" height="300" alt="A Honey Bee" /> 
    </div> 

    <div class="text-box"> 
     <p class="paragraph"> 
      Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. Bees are an important part of the ecosystem that are increasingly being threatened by pesticides, fungi and a host of other pathogens. 
     </p> 
     <div class="button">Bees!</div> 
    </div> 
</div> 

CSS（在元素的背景只是表現出結構爲您）：

.container { 
    min-width: 480px; 
} 

.image-box { 
    float: left; 
    position: relative; 
} 

.text-box { 
    background: #ffa3d0; 
    min-height: 300px; 
    float: left; 
    position: relative; 
    width: 180px; 
} 

.paragraph { 
    background: #a3cdff; 
    padding: 10px; 
    max-height: 205px; 
    overflow: hidden; 
} 

.button { 
    background: #c5ffa3; 
    margin: 5px auto; 
    padding: 10px; 
    text-align: center; 
    width: 50px; 
}