无法使图像与基础块网格类对齐到底部的d​​iv [英] Can't get image to align to bottom of div with Foundation block-grid class

问题描述

我使用Foundation 4.0框架，我有一个块网格，我想创建。每个 li 包含具有固定宽度的图像，但所有图像的高度不同。我需要图像和文本对齐到div的底部。下面是我的html。我已经尝试改变父div的位置相对和位置绝对，但不能得到任何工作。非常感谢任何帮助。

I am using Foundation 4.0 framework, and I have a block grid I am trying to create. Each li contains an image with a fixed width but the height is not the same for all images. I need the images and text to align to the bottom of the div. Below is my html. I have tried changing the parent div to position relative and position absolute, but cannot get anything to work. Any help is greatly appreciated.

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>  

推荐答案

c> float：none 添加到我的css中的 li 。这对齐一切，但是当减少浏览器的大小，我的图像堆叠在彼此的顶部。然后我在< li> 内添加了 div ，它似乎正确折叠。

I ended up fixing this by adding float:none to the li in my css. This aligned everything, but when reducing the browser size, my images were stacking on top of each other. I then added a div inside the <li> and it seemed to then collapse correctly.

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

这篇关于无法使图像与基础块网格类对齐到底部的d​​iv的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！