In the following example I am trying to create a div that contains any number of other divs which are centered and contain four divs per row (with the last row containing however many are left if the total number of images is not divisible by four).
However, it's causing there to be a small (about 3 pixels) spacing below each row of images. Is there any way to make the images so they have no spacing above/below each row?
.container {
width: 100%;
display: table;
text-align: center;
}
.image {
display: inline-block;
width: 25%;
}
.image img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
<div class="container">
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
</div>
Just for good measure, here's a screenshot showing the gap I'm referring to:
You can fix this by adding vertical-align: top; to your images.
CSS
.image img {
vertical-align: top;
}
.container {
width: 100%;
display: table;
text-align: center;
}
.image {
display: inline-block;
width: 25%;
}
.image img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
}
<div class="container">
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
<a href="#" class="image">
<img src="http://placehold.it/400x400" alt="">
</a>
</div>
Browser automatically adds some space between lines of (what it considers) text. You can resolve it simply by adding font-size: 0 to the images' wrapper.
Related
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 1 year ago.
So am new to learning/using the "display: flex" property.
*{
margin: 10px;
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
Here are 4 boxes of a certain size but if I insert one more, the size gets smaller as it tries to fit the 5th box in the same line, how to get the 5th box in the next line?
*{
margin: 10px;
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
I want the images to automatically go on to the next line when it reaches the end of the main container, I have tried reducing the width as well, it didn't work.
It's probably something very simple but I can't really seem to find the way, also am not fully accustomed with all the flexbox properties
change width of .imagebox {} accordingly
*{
padding: 0;
-webkit-margin:0;
-webkit-padding:0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.imagebox {
position: relative;
margin: 15px;
width: 20%;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
You can use the flex-wrap property:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
Flexbox doesn't play nicely with absolutely-positioned children. By taking the images out of the normal flow, they no longer take part in the flexbox calculations. The remaining imagebox element is not wide enough to trigger wrapping.
.container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.imagebox {
flex: 0 0 calc((100% - 45px) / 4);
}
.imagebox img {
max-height: 200px;
max-width: 100%;
}
<div class="container">
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
<div class="imagebox">
<a href="#" class="images">
<img class="active" src="https://fakeimg.pl/350x200/000/?text=Image" />
</a>
</div>
</div>
I've built a gallery layout. Each <div class="gallery"> section fills the viewport. Here's how it looks without a sticky header. The layout works as expected using this method.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
.gallery {
display: flex;
height: 100vh;
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery width and height */
width: 100%;
height: 100vh;
object-fit: cover;
}
<header>
<span>Header</span>
</header>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<footer>
<span>Footer</span>
</footer>
Next, I've added a sticky header, like so.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
header {
position: sticky;
top: 0;
}
.gallery {
display: flex;
height: calc(100vh - 120px);
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure img {
display: block;
/* Make images responsive */
height: auto;
max-width: 100%;
/* Fill .gallery width and height */
width: 100%;
height: 100vh;
object-fit: cover;
}
<header>
<span>Header</span>
</header>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<footer>
<span>Footer</span>
</footer>
To account for the sticky header, I've added height: calc(100vh - 120px); to .gallery. This works for the first .gallery parent, but something funky is happening with the last parent .gallery. As you can see, the footer overlaps.
EDIT
If you inspect <figure> on the sticky header example, you'll notice that it's correctly calculating the height. For example, at a resolution of 1366x768, the height of <figure> measures 648px in height (768px - 120px). However, the <a> and <img> elements show a height of 768px.
How can I fix this?
As per my edit, the problem lies with the the <a> and <img> elements not being contained with the <figure> element. I've resolved this by adding height: 100%; to .gallery figure a and .gallery figure img.
body {
margin: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
img {
height: auto;
max-width: 100%;
}
header,
footer {
padding: 48px;
color: #fff;
background-color: #000;
}
.gallery {
display: flex;
height: 100vh;
}
.gallery figure {
flex: 1;
margin: 0;
}
.gallery figure a,
.gallery figure img {
display: block;
height: 100%; /* Fills the height of <figure> */
}
.gallery figure img {
object-fit: cover;
}
<header>
<span>Header</span>
</header>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<div class="gallery">
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
<figure>
<a href="#" class="lightbox">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Yawning_cat_portrait_%288423278464%29.jpg/1200px-Yawning_cat_portrait_%288423278464%29.jpg" alt="Cat">
</a>
</figure>
</div>
<footer>
<span>Footer</span>
</footer>
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 3 years ago.
My probleme is difficult to explain but i will try.
I develop a web site. For my nav-bar i have 3 div in a header (burger-menu / loogo / social-networks). I use flex for display with justify-content: between.
My probleme is i want to center my second div by the viewport and not by my two other divs. Someone know how to do ?
(Please excuse my bad English)
<header>
<div class="burger">
<img src="assets/img/cutlery.svg" alt="icône couteau cuillère burger menu">
</div>
<div class="logo">
<img src="assets/img/bio.svg" alt="">
</div>
<div class="network">
<a href="#">
<img src="assets/img/facebook.svg" alt="">
</a>
<a href="#">
<img src="assets/img/linkedin.svg" alt="">
</a>
<a href="#">
<img src="assets/img/instagram.svg" alt="">
</a>
<a href="#">
<img src="assets/img/france.svg" alt="">
</a>
<a href="#">
<img src="assets/img/english.svg" alt="">
</a>
</div>
</header>
You can add
position: absolute;
width: 100%;
display: flex;
justify-content: center;
to your second div. Look here:
header{
display: flex;
width: 100%;
justify-content: space-between;
}
.logo{
position: absolute;
width: 100%;
display: flex;
justify-content: center;
}
<header>
<div class="burger">
Burger
</div>
<div class="logo">
Logo
</div>
<div class="network">
<a href="#">
Fb
</a>
<a href="#">
Ln
</a>
<a href="#">
I
</a>
<a href="#">
Fr
</a>
<a href="#">
En
</a>
</div>
</header>
Just tested the code below, and it works. This is to give an idea; CSS attributes have to be in separate file of course:
<div style="display:flex;flex-direction:row;width:100%">
<div style="flex:1 1 0px">
<span style="float:right;background-color:lime">Left Element</span>
</div>
<div style="background-color:blue">Central element</div>
<div style="flex:1 1 0px">
<span style="background-color:red">Right 1</span>
<span style="background-color:gray">Right 2</span>
<span style="background-color:magenta">Right 3</span>
</div>
</div>
Or you can have like this.
header{
display: flex;
width: 100%;
justify-content: space-between;
}
.right-menu{
display: flex;
flex: 0 0 55%;
justify-content: space-between;
}
.right-menu ul{
list-style:none;
margin:0;
}
.right-menu ul li{
display:inline-block;
}
<header>
<div class="burger">
Burger
</div>
<div class="right-menu">
<div class="logo">
Logo
</div>
<ul>
<li>
<a href="#">
Fb
</a>
</li>
<li>
<a href="#">
Ln
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
<li>
<a href="#">
Fr
</a>
</li>
<li>
<a href="#">
En
</a>
</li>
</ul>
</div>
</header>
Give all the child elements of the flexbox a flex: 1 to give them the same width, then give your .logo div a text-align: center.
header {
display: flex;
width: 960px;
background: lightblue;
}
header>* {
flex: 1;
}
header .logo {
text-align: center;
}
header .network {
text-align: right;
}
<header>
<div class="burger">
<img src="http://placekitten.com/40/40" alt="icône couteau cuillère burger menu">
</div>
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
</div>
<div class="network">
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
<a href="#">
<img src="http://placekitten.com/50/50" alt="">
</a>
</div>
</header>
This answer well be helpful.
header {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
}
header > div {
display: inline-flex;
flex-basis: 33.33%;
align-items: center;
}
.burger {
justify-content: flex-start;
background-color: #AAAAAA;
}
.logo {
justify-content: center;
background-color: #DDDDDD;
}
.network {
justify-content: flex-end;
background-color: #AAAAAA;
}
<header>
<div class="burger">
<span>01</span>
<img src="assets/img/cutlery.svg" alt="">
</div>
<div class="logo">
<span>02</span>
<img src="assets/img/bio.svg" alt="">
</div>
<div class="network">
<a href="#">
<span>03</span>
<img src="assets/img/facebook.svg" alt="">
</a>
<a href="#">
<span>04</span>
<img src="assets/img/linkedin.svg" alt="">
</a>
<a href="#">
<span>05</span>
<img src="assets/img/instagram.svg" alt="">
</a>
<a href="#">
<span>06</span>
<img src="assets/img/france.svg" alt="">
</a>
<a href="#">
<span>07</span>
<img src="assets/img/english.svg" alt="">
</a>
</div>
</header>
HTML
<div class="button">
<a href="#">
<img id="img1" src="icons/onas1.svg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="icons/kontakt1.svg" alt="kontakt">
</a>
</div>
</div>
CSS:
div.button img{
position: fixed;
height: 10%;
display: inline-block;
}
Hey, how can I put these two images next to each other?
Try this code:
div a img{
height: 10%;
width:200px;
}
<div class="button">
<a href="#">
<img id="img1" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="O nas[enter image description here][1]">
</>
<a href="#">
<img id="img2" src="https://yt3.ggpht.com/-3N3L1JNdZ4k/AAAAAAAAAAI/AAAAAAAAAAA/PmHzBEEHaU4/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="kontakt">
</a>
</div>
</div>
I have the following code and want the anchor everywhere in the box not only at the image:
HTML:
<p style="clear:left" />
<div class="reference_container">
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
</div>
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
</div>
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
</div>
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
</div>
</div>
<p style="clear:left" />
CSS:
.reference_container {
display: flex;
}
.reference_box {
border: 1px solid #ddd;
border-radius: 5px;
margin: 1%;
position:relative;
overflow: hidden;
padding: 15px;
white-space: nowrap;
display:inline-block;
}
.reference_box_geraete {
width: 22%;
/*box-sizing: border-box;*/
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.reference_box_geraete img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
The problem is that I don't get the anchor to stretch to the whole surrounding div.
I tried to remove the div and make the anchor as block-element, but then the images are not stretched correctly (doesn't keep aspect-ratio) when resizing the browser window.
How can I achieve this.
set width , height and display:block for element a
check this:
<p style="clear:left" />
<div class="reference_container">
<a class="reference_box reference_box_geraete" href="google.de">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
<a href="google.de" class="reference_box reference_box_geraete">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
<a href="google.de" class="reference_box reference_box_geraete">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
<a href="google.de" class="reference_box reference_box_geraete">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
</div>
<p style="clear:left" />
Demo: http://www.cssdesk.com/p5Cqd