gpt4 book ai didi

html - 无法使图像与 Foundation block 网格类的 div 底部对齐

转载 作者:行者123 更新时间:2023-11-28 18:14:51 25 4
gpt4 key购买 nike

我正在使用 Foundation 4.0 框架,并且我有一个要创建的 block 状网格。每个 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>

最佳答案

我最终通过添加 float:none 解决了这个问题到 li在我的CSS中。这使所有内容都对齐了,但是当减小浏览器大小时,我的图像会堆叠在一起。然后我添加了一个 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>

关于html - 无法使图像与 Foundation block 网格类的 div 底部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18030472/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com