Question

我正在使用Foundation 4.0框架，我正在尝试创建一个块网格。每个li包含一个固定宽度的图像，但所有图像的高度都不相同。我需要将图像和文本对齐到div的底部。下面是我的HTML。我已经尝试将父div更改为position relative和position absolute，但无法获得任何工作。非常感谢任何帮助。

CSS：

li {
    display:inline-block;
    vertical-align: bottom;
    text-align: center;
}
img {
  max-width: 127px;
  height: auto;
  margin-bottom: 0.7em;
}

// All other styles are defined by the ul.large-block-grid-4 within Foundation.

HTML：

<div class="card-shadow-wrapper">
  <ul class="small-block-grid-2 large-block-grid-4">
    <li>
      <a href="http://example.com">
        <img class="cover" src="image1.png">
        <p>Book 1 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
    <li>
      <a href="http://example.com">
        <img class="cover" src="image2.png">
        <p>Book 2 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
    <li>
      <a href="http://example.com">
        <img class="cover" src="image3.png">
        <p>Book 3 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
    <li>
      <a href="http://example.com">
        <img class="cover" src="image4.png">
        <p>Book 4 Title</p>
        <p>Some Cool Author</p>
      </a>
    </li>
  </ul>
</div>

Answer 1

我最后通过将float:none添加到我的CSS中的li来解决此问题。这对齐了一切，但是当缩小浏览器大小时，我的图像堆叠在一起。然后我在div内添加了<li>，然后它似乎正确崩溃了。

更正了CSS：

li {
  display:inline-block;
  vertical-align: bottom;
  text-align: center;
}

更正了HTML：

<li>
  <div>
    <a href="http://example.com">
      <img class="cover" src="image4.png">
      <p>Book 4 Title</p>
      <p>Some Cool Author</p>
    </a>
  </div>
</li>

无法使用Foundation块网格类将图像对齐到div的底部

1 个答案: