Question
I am designing an html page where I need to display my inserted images. I want the arrangement of images in such a way :
https://stackoverflow.com/questions/23240419
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianImage1 Image2 Image3
Image4 Image5 Image6
Image7 Image8 Image9
<html>
<head>
<title>Display Images</title>
</head>
<body>
{% for image in images %}
<div>
<img src={{ self.item_.images }}>
</div>
{% endfor %}
</body>
<html>
All the images there after aligns in the same order. First row with three images, then automatically break, then next row.
Please help. Best Regards
Solution
Simply float every image left...then clear after every third image in order to force the next three to a new line.
You can use the CSS nth-child selector for this, as outlined below. This escapes the need for setting specific widths for each image, and a parent container.
CSS
img{
float:left;
}
img:nth-child(3n+1){
clear:left;
}
OTHER TIPS
Is this what you want?
HTML
<div class='container'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
<img src='http://www.openvms.org/images/samples/130x130.gif'>
</div>
CSS
.container{
display:block;
width:400px;
}
.container img{
float:left;
padding:1px;
}
Image1 (fll) Image2 (fll) Image3 (fll)
(clear)Image4 (fll) Image5 (fll) Image6 (fll)
(clear)Image7 (fll) Image8 (fll) Image9 (fll)
Where :
fll - float: left
clear - clear: both
Do you want your images to have a fixed size?
If not:
<html>
<head>
<style>
img {
width: 33%;
height: 100px;
float: left;
}
</style>
</head>
<body>
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</body>
</html>
If yes: (You might need to consider a fixed container width.)
<html>
<head>
<style>
.main-container {
width: 900px;
margin: 0 auto;
}
img {
width: 300px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="main-container">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
<img src=""><img src=""><img src="">
</div>
</body>
</html>
Floating allows the images to fill a row. Fixed with of images and the container makes it possible to determine how many images there will be in the row.
If you want to follow responsive design, you could add break point to your page so that in smaller screen sizes your grid of images depends on available space.
Normally you will want to have fixed size for your images that is their actual size. Otherwise the displayed quality of the images might be bad.
You can find the idea here
Then I customize it for you.
<!DOCTYPE html>
<html>
<head>
<style>
.container
{
width:500px;
}
div.img
{
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
