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基金会这样做？如果是这样，怎么样？

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;
}

Zurb基金会纵向调整内容

1 个答案: