Html 如何在3列中布局图像

如何像那样放置图像（html、css）：

我尝试：

---

您可以使用float执行此操作。 以下代码是一个例外：

<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>

1
2.
3.
4.
5.

今后请遵循指导原则

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

您可以使用

CSS

HTML

演示（图像尺寸固定）：

---

演示（响应）：

Stackoverflow不是代码请求系统。试着自己做，然后发布你的代码，然后你会得到帮助。我很乐意帮助你。但是你的问题应该遵循原则：对不起。我试过了，但没有在帖子中插入。谢谢。看：如果缩放是空白区域（填充/边距？），我不确定你在说什么。div的高度为154px，图像的高度为150px。因此，这可能会导致利润。您必须设置div.的高度，并且不要对图像使用width和height属性。使用CSS.Thx。但这不是响应性的…Flexbox是完全响应性的。但我使用的是HTML，它为图像设置了固定的宽度和高度。您可以删除这些固定值，并在CSS中使用相对值（如百分比）。谢谢！：）我在回答中添加了一个响应性演示版本。

#container-outer {
    display: flex;
}

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

<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 -->