当我使用 CSS 和 HTML 显示图片时，如何让我的图片以 4 行显示？答案

【问题标题】：How do I make my pictures go in rows of 4 as I am showing it using CSS and HTML?当我使用 CSS 和 HTML 显示图片时，如何让我的图片以 4 行显示？
【发布时间】：2014-07-26 10:49:14
【问题描述】：

<div class="img">   
<a target="_blank" href="slideshow/slideshow2.jpg"><img src="slideshow/slideshow2.jpg" alt="Klematis" width="110" height="90"></a>
</div>

<div class="img">
 <a target="_blank" href="slideshow/slideshow3.jpg"><img src="slideshow/slideshow3.jpg" alt="Klematis" width="110" height="90"></a>

这是我正在使用的代码。 www.goparkfast.com 如果您想在我的网站上查看它是如何设置的，请在图片部分查看。

【问题讨论】：

img { 最大宽度：100%;高度：自动； } img.scale-with-grid { 最大宽度：100%；高度：自动； }
这就是我定义的 img
你应该有一个简洁的标题，然后在主帖中用相关代码描述你的问题。同时编辑您的帖子，而不是评论编辑。
.img { display:inline:block; } - 默认情况下，div 是块级元素，并且会跨越其父元素的宽度。
我试过你所说的 Nick R 但没有用 img { max-width: 100%;高度：自动；显示：内联：块； } img.scale-with-grid { 最大宽度：100%；高度：自动； }

标签： html css slideshow picturegallery

【解决方案1】：

尝试将图像放在分区中，然后放置一定大小的分区，例如 25%，最后将其标记为 float:left

【讨论】：

【解决方案2】：

将包含 div 的设置为 float: left 和 width: 25%。

【讨论】：

非常抱歉，这是我的第一个网站，哈哈。 img { 最大宽度：25%;高度：自动；向左飘浮; } img.scale-with-grid { 最大宽度：25%;高度：自动； }
是这个意思吗？看看我是如何改变 .img
@user3711144 部分原因是，您是否希望列表旁边的图像为 4 行？将四张图片添加到其中一张列表中，我将向您展示如何在实时示例中对齐它们。
LOL 四个否定我的问题？我在这里问的第一个问题是我做错了什么。好吧 Mr.Linek 我希望它们水平而不是垂直，当我再添加四个时，我希望它们出现在下面并有 16 张图片，四行四张。然后我可以创建尽可能多的行
在sixteen columns div 中添加div 标签，并在该div 中移动a 标签和img。现在将 CSS 设置为 a 标签到 float:left; width: 25%;。现在将宽度设置为您刚刚创建的 div 标记，例如 width: 400px（您想要的任何宽度）。