无法使用 Foundation 块网格类使图像与 div 的底部对齐答案

【问题标题】：Can't get image to align to bottom of div with Foundation block-grid class无法使用 Foundation 块网格类使图像与 div 的底部对齐
【发布时间】：2013-08-06 10:58:02
【问题描述】：

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

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>

【问题讨论】：

请分享您的 css 代码，没有 css 怎么能解决您的问题？
<a><h5></h5></a> 不是 W3C 有效
我正在使用他们为ul.large-block-grid-4 类应用的 Foundation 基本样式。我尝试申请l1 { display:inline-block; }，但没有成功。老实说，我不是前端人员（因此 W3C 无效 html）。只是一个试图解决问题的后端人员。
你也应该清除 li 元素的浮动。 “浮动：无；”
添加 float:none 确实解决了在大屏幕上查看时的问题，但它不会随着小屏幕上的响应式网格折叠。项目相互重叠。对此有何建议？感谢您的帮助。

标签： html css zurb-foundation

【解决方案1】：

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

更正的 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>

【讨论】：