首页 文章

Zurb基金会垂直调整内容

提问于
浏览 次
1

我正在与Zurb Foundation Build 一个网站 . 我想要包括一个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基金会这样做？如果是这样，怎么样？

css zurb-foundation

1 回答

  • -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;
}
    回复于

相关问题