在 Zurb Foundation 中垂直对齐内容

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 Foundation 中做到这一点？如果有，怎么做？

Answer 1

完成此操作的最简单方法是将两个容器（一个用于图像，一个用于文本）彼此相邻浮动，文本容器内有一个段落文本框和一个按钮框。

为段落框设置一个最大高度，大约为图片高度的 70-80%（取决于段落框的宽度）并设置一个溢出：隐藏；以防您的文本运行很长时间并且您不希望布局中断。将按钮放在带有简单上边距的固定高度段落框下方，您应该会很好。

您可以将我制作的这些框与 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;
}