Menu
I am trying to position thumbnails across the screen with even "padding". Here is an image illustrating the problem:
<!DOCTYPE html>
<html>
<head>
<title>Test rows</title>
<style type="text/css">
body {
background: #121212;
color: #fff;
}
#Container {
background: #585858;
margin: 0 auto;
min-width: 1024px;
width: 85%;
margin-top: 50px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#Container a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div id="Container">
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<span class="stretch"></span>
</div>
</body>
</html>
I did some research here in stackoverflow and found some usefull code to start, but I am facing a few problems. I want the images to align from left to right and not "snap" to the boders of the container when I have less images in the last rows as you see the image.
Also I would like to have the "vertical space" between rows to be equal to the horizontal spacing between images, for now I have some vertical spacing like "3px" and I am not sure where is comming from. I am opened to js solutions if needed. Thank you
513
Would something LIKE THIS work for you?
This is based on an answer supplied here on SO which I would recommend you read, as well as this one- also based around it. This justifies the child elements.
HTML
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<span class="stretch"></span>
</div>
CSS
#container {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
}
.box {
width: 150px;
height: 125px;
background:#ccc;
vertical-align: top;
display: inline-block;
*display: inline;
margin:10px;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
Alternatively, if instead of the child items being justified you wish them to align left to right, have a look at this fiddle, based around this answer on SO
HTML
<div class="container">
<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>
<div>Box7</div>
<div>Box8</div>
<div>Box9</div>
<div>Box10</div>
<div>Box11</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.container {
overflow: auto;
display: block;
}
.container > div {
margin: 20px;
width: 150px;
height: 100px;
background: blue;
float: left;
color: #fff;
text-align: center;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
