Making these image dividers horizontal - html
I'm trying to make a simple homepage with clickable images as buttons, no problem, I can do that.
But I'm stuck at this part:
I have these 4 images in dividers with on hover shadow.
Now these images are vertical under each other.
I want them horizontal next to each other.
EDIT: Got it, now I need it to center it horizontal and vertical.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgBox
{
width: 300px;
height: 600px;
display: inline-block
}
.imgBox:hover
{
display: inline-block
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
</style>
</head>
<body background="back.jpg">
<center>
<div align="left">
<div class="imgBox">
<a target="_blank" href="IntensityBanner.png">
<img src="IntensityBanner.png" alt="Trolltunga Norway" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="EarningsBanner.png">
<img src="EarningsBanner.png" alt="Forest" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_lights.jpg">
<img src="DesignBanner.png" alt="Northern Lights" width="300" height="600">
</a>
</div>
<div class="imgBox">
<a target="_blank" href="img_mountains.jpg">
<img src="SpaarGamesBanner.png" alt="Mountains" width="300" height="600">
</a>
</div>
</center>
</div>
</body>
</html>
Live demo: http://twanofzo.nl/test/
First, make sure you close that first imgBox div (line 12) or it'll give you trouble.
Next, to make them display horizontally, you should just be able to either add display: inline-block or float: left to your css for .imgBox
Related
Responsive gallery (HTML/CCS) not working
This is my first time on Stack Overflow. I recently started learning about HTML/CCS and I am stuck on a current project.
I wanted to make a gallery of album covers for a project, but whenever I 'zoom' in on the webpage (probably not the right term) the lay-out goes crazy. I think this issue is a 'responsive' issue and I tried adding a media query but i can 't make it look decently.
How can I change so that for example, it goes from a row of 5 album covers to 4 without there being gaps in the gallery? It goes from looking decent to 4 white squares in the same row.
I took the relevant code and pasted it in this link, if this isn't enough information I'd be happy to show all the code (it's still a bit of a mess, hence why I took this piece of code out of the full page)
https://codepen.io/LotteElders/pen/ZEpeRzN
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: center;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
<figure>
<figcaption>
<h3> A summary of Cady Groves's albums </h3>
</figcaption>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/1oN2SgPwi43flviKj6rbBA">
<img src="https://m.media-amazon.com/images/I/714Jha+uaKL._SS500_.jpg" alt="Album cover of A Month of Sundays" width="600" height="400">
</a>
<div class="desc">A Month of Sundays (2009)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/1vW2HVeeXpmGBbpLkzt375">
<img src="https://images.genius.com/0add2529149d47b12983fa2e4a07b2a6.300x300x1.jpg" alt="Album cover of The Life of a Pirate (2010)" width="600" height="400">
</a>
<div class="desc">The Life of a Pirate (2010)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/6csTNqy5qkYCzPFJyHDA67">
<img src="https://m.media-amazon.com/images/I/71WUWQUq4-L._SS500_.jpg" alt="Album cover of This Little Girl" width="600" height="400">
</a>
<div class="desc">This Little Girl (2012)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/5HYv3SmW85lbspRTA1rDY0">
<img src="https://img.discogs.com/vCdTJTKCznRPIgplZuMLAZeIoio=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/R-14325893-1572275353-3944.jpeg.jpg" alt="Album cover of Dreams" width="600" height="400">
</a>
<div class="desc">Dreams (2015)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/0k7vFx71y0w5r6RGhDMAfG">
<img src="https://images.genius.com/558fcb01fc43d257d8663b625cfa7086.1000x1000x1.jpg" alt="Album cover of Bless My Heart (2020)" width="600" height="400">
</a>
<div class="desc">Bless My Heart (2020)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/7swc0NVH2XCLH1EAXnbsP3">
<img src="https://cont-5.p-cdn.us/images/public/int/9/3/2/2/886444042239_1080W_1080H.jpg" alt="Single cover of Forget You (2013)" width="600" height="400">
</a>
<div class="desc">Forget You (2013)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/5jiaYe6RTZ5jpcqGbIVVyO">
<img src="https://resources.tidal.com/images/d4bbe9f2/bcdc/4489/81ef/42580782144b/640x640.jpg" alt="Album cover of This Little Girl" width="600" height="400">
</a>Whiskey & Wine feat. Christian Burghardt (2015) </div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/6wUnijjeRKwBTqJSb7TcF4?highlight=spotify:track:3cXEhlI2PKHEjDt39I2upA">
<img src="https://images.genius.com/e45451e414fac83f6523a491f652a14a.500x500x1.jpg" alt="Single cover of Love Actually (2012)" width="600" height="400">
</a>
<div class="desc">Love Actually (2012)</div>
</div>
<div class="gallery">
<a target="_blank" href=https://open.spotify.com/album/0m2SFT766eRgMkzIjQHTOn?highlight=spotify:track:5eue4RoH3PG3k9qWdTwjL8>
<img src="https://images-na.ssl-images-amazon.com/images/I/91MNZnhU74L._SL1500_.jpg" alt="Single cover of Oh, Darling (2012)" width="600" height="400">
</a>
<div class="desc">Oh, Darling feat. Plug In Stereo (2012)</div>
</div>
</figure>
Thank you for reading this!
Please add the codes that I wrote.
figure {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
align-items: center;
justify-content: center;
}
Rendering image positions different in different browsers
I am trying to render the images, it comes out perfectly in Firefox and Chrome, but is having issues in Safari(v 7.0.3). In Safari, image shifts to bottom right, while I want the image to be at the bottom center.
This is my css
.circular {
/*margin: 10px 30px 0px 30px;*/
display: block;
margin: 0 auto;
position: relative;
bottom:-400px;
left:93%;
transform:translateX(-50%);
}
HTML :
<section class="module parallax parallax-1">
<div class="container">
<div class="circular" vertical-align:middle; text-align:center><img src="images/index/yoyo.png" width=120px height=120px></div>
<div class="social_tags" vertical-align:middle; >
<img src="images/index/github.png" width=40px height=40px>
<img src="images/index/facebook.png" width=40px height=40px>
<a href="mailto:yoyo#gmail.com?Subject=Hello" ><img src="images/index/gmail.png" width=40px height=40px></a>
<img src="images/index/linkedin.png" width=40px height=40px>
</div>
</div>
</section>
You have several issues with your html. I fixed them in this fiddle and it works the same in chrome as in safari: https://jsfiddle.net/msq0eqch/3/ This is the corrected html code: (You had your style without style="" etc.) <section class="module parallax parallax-1"> <div class="container"> <div class="circular" style="vertical-align:middle; text-align:center"><img src="images/index/yoyo.png" width="120px" height="120px"></div> <div class="social_tags" style="vertical-align:middle;" > <img src="images/index/github.png" width="40px" height="40px"> <img src="images/index/facebook.png" width="40px" height="40px"> <img src="images/index/linkedin.png" width="40px" height="40px"> </div> </div> </section> Also add -webkit-transform:translateX(-50%); to your css.
cannot make my data in small centerd gray boxes
This is the beginning of my html: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"></link> <script type="script" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <h1>Delta Fresh Samples:</h1> <p>save date: 08:23:11 31-May-02015</p> <div class="jumbotron" id="distance_small"> <h3>distance small</h3>0_1 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span> <br> </div> <div class="jumbotron" id="distance_large"> <h3>distance large</h3>0_0 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/? and this is the result: I wanted to created boxes in the center of the page. I saw twitter bootstrap example (this example) but I cannot make class "jumbotron" center my data in medium size gray boxes. what am i missing? In Addition, if i would want to style this without twitter bootstrap how would you advise me to do this?
you can achieve that with some styling
like this:
html
<h1>Delta Fresh Samples:</h1>
<p>save date: 08:23:11 31-May-02015</p>
<div class="jumbotron" id="distance_small">
<h3>distance small</h3>0_1
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span>
<br>
</div>
<div class="jumbotron" id="distance_large">
<h3>distance large</h3>0_0
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?"></a>
</div>
css:
.jumbotron{
background:#ddd;
width:220px;
margin:0 auto;
}
.jumbotron img{
display:block;
margin:0 auto;
}
.jumbotron a,.jumbotron span{
display:inline-block;
margin-left:10px;
}
see this fiddle
.jumbotron{
position : relative;
margin: 0 auto;
}
and for being in one line use display: inline-block
Want to have pictures next to each other in my gallery (Html)
Basically I have put a gallery into the website that I am making, and it works well. But. The pictures just scroll down the left side of the screen. I would like half of the pictures to be to the right of the other pictures... Here is a screenshot of my website (With Hi-tech red boxes drawn in paint to show where I would like half of the pictures to go)
http://tinypic.com/view.php?pic=hx3fbb&s=8#.U2JPKYFdX-k
Here is my code....(html)
<div class="img">
<a target="_blank" href="Gallery/Ss1.jpg">
<img src="Gallery/Ss1.jpg" alt="Screenshot1" width="500" height="400">
</a>
<div class="desc">Death vs Colossus</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss2.jpg">
<img src="Gallery/Ss2.jpg" alt="Screenshot2" width="500" height="400">
</a>
<div class="desc">Death's forge</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss3.jpg">
<img src="Gallery/Ss3.jpg" alt="Screenshot3" width="500" height="400">
</a>
<div class="desc">Death vs Horseman</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/Ss4.jpg">
<img src="Gallery/Ss4.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Horse Jump</div>
</div>
<p></p>
<div class="img">
<a target="_blank" href="Gallery/fa1.jpg">
<img src="Gallery/fa1.jpg" alt="FanArt1" width="500" height="400">
</a>
<div class="desc">Fan Art #1</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa2.jpg">
<img src="Gallery/fa2.jpg" alt="FanArt2" width="500" height="400">
</a>
<div class="desc">Fan Art #2</div>
</div>
<div class="img">
<a target="_blank" href="Gallery/fa3.jpg">
<img src="Gallery/fa3.jpg" alt="FanArt3" width="500" height="400">
</a>
<div class="desc">Fan Art #3</div>
</div>
<div class="img1">
<a target="_blank" href="Gallery/fa4.jpg">
<img src="Gallery/fa4.jpg" alt="FanArt4" width="500" height="400">
</a>
<div class="desc">Fan Art #4</div>
</div>
and here is my CSS code;
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;
}
So again, I would basically like the Fan art pictures to appear to the right of the Screenshot pictures. I tried making a new div class for the fan art and changing the float to 'right' but that didn't work.
Thankyou in advance for your time and input :)
There are a couple different methods you could use for this. You could use floats or display: inline-block. http://jsfiddle.net/Davidicus/p4Qkh/ Here is a simple float example. I have a pen where i am using "inline-block" to float elements. Click on the little eye icon in the css panel to see the compiled css. http://codepen.io/davidicus/pen/vxIra
Vertical and Horizontal alignment
I am designing an html page where I need to display my inserted images. I want the arrangement of images in such a way :
Image1 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
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.
Demo Fiddle
CSS
img{
float:left;
}
img:nth-child(3n+1){
clear:left;
}
Is this what you want?
DEMO
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>