How to layout images in 3 columns [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How to place image like that (html,css):
I try:
<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"/>
Thanks!

Answer 1

You can use 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 (image dimensions fixed): http://jsfiddle.net/3wbme70k/
DEMO (responsive): http://jsfiddle.net/3wbme70k/1/

Answer 2

You can use float to do this.
As an exception here is the code:
<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/
In the future please follow the guidelines.
Edit: I checked your code. Please use CSS-Styles. Float breaks if there is not enough space.