如何在3列中布局图像

Question

如何放置像这样的图像（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"/>

谢谢！

Answer 1

您可以使用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>

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

将来请遵循指南。

修改：我检查了您的代码。请使用CSS-Styles。如果没有足够的空间，浮动会中断。

Answer 2

您可以使用 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 -->

DEMO（图片尺寸已修复）：http://jsfiddle.net/3wbme70k/
DEMO（响应）：http://jsfiddle.net/3wbme70k/1/