如何在 3 列中布局图像 [关闭]答案

【问题标题】：How to layout images in 3 columns [closed]如何在 3 列中布局图像 [关闭]
【发布时间】：2015-12-15 23:40:04
【问题描述】：

如何放置这样的图像（html，css）：

我试试：

<img src="http://dummyimage.com/600x400/666" height="300" width="200"/>
<img src="http://dummyimage.com/600x400/333" height="150" width="100" align="top"/>
<img src="http://dummyimage.com/600x400/f2f" height="150" width="100" align="top"/>
<img src="http://dummyimage.com/600x400/ee3" height="150" width="100"/>
<img src="http://dummyimage.com/600x400/532" height="150" width="100"/>

谢谢！

【问题讨论】：

Stackoverflow 不是代码请求系统。尝试自己做并发布您的代码，然后您将获得帮助。
很乐意为您提供帮助。但您的问题应遵守准则：stackoverflow.com/help/mcve
对不起。我尝试了，但没有在帖子中插入。

标签： html css image

【解决方案1】：

您可以使用CSS Flexbox。

CSS

#container-outer {
    display: flex;
}

.container-inner {
    display: flex;
    flex-direction: column;
}

HTML

<div id="container-outer">
    <img src="http://dummyimage.com/600x400/666" height="300" width="200">
    <div class="container-inner">
        <img src="http://dummyimage.com/600x400/333" height="150" width="100">
        <img src="http://dummyimage.com/600x400/f2f" height="150" width="100">
    </div>
    <div class="container-inner">
       <img src="http://dummyimage.com/600x400/ee3" height="150" width="100">
       <img src="http://dummyimage.com/600x400/532" height="150" width="100">
    </div>
</div><!-- end #container-outer -->

演示（图像尺寸固定）：http://jsfiddle.net/3wbme70k/
DEMO（响应式）：http://jsfiddle.net/3wbme70k/1/

【讨论】：

谢谢。但这不是响应式的......
Flexbox 完全响应。但我使用的是您的 HTML，它为图像设置了固定的宽度和高度。您可以删除这些固定值并在 CSS 中使用相对值（如百分比）。
我使用你的代码。谢谢！ :)
我在回答中添加了响应式演示版本。

【解决方案2】：

您可以使用浮动来执行此操作。作为一个例外，这里是代码：

<div style="float:left;background:red;height: 100px;width:50%;">1</div>
<div style="float:left;height: 50px;width:25%;background:blue;">2</div>
<div style="float:left;height: 50px;width:25%;background:green;">3</div>
<div style="float:left;height: 50px;width:25%;background:yellow;">4</div>
<div style="float:left;height: 50px;width:25%;background:grey;">5</div>

https://jsfiddle.net/webbis12/ko5p2gnc/

以后请遵守指南。

编辑：我检查了你的代码。请使用 CSS 样式。如果空间不足，浮动会中断。

【讨论】：

谢谢。看：jsfiddle.net/ko5p2gnc/1 如果缩放是空白区域（填充/边距？）
我不确定你在说什么。 div 的高度为 154px，图像的高度为 150px。所以这可能会导致利润。您必须设置 div 的高度。并且不要对图像使用宽度和高度属性。使用 CSS。