css - Zurb Foundation 中的垂直对齐内容

Question

我正在与 Zurb Foundation 建立一个网站。我想包括一个 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

完成此操作的最简单方法是将两个容器(一个用于图像，一个用于文本)彼此相邻 float ，并在文本容器内放置一个段落文本框和一个按钮框。

为段落框设置一个最大高度，大约为图像高度的 70-80%(取决于段落框的宽度)，并放置一个 overflow: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;
}