[CSS][HTML]Problem z obrazkami Opcje

[matti9410]

Witam mam takie pytanie co trzeba zrobić aby obrazki do siebie przylegały chodzi mi o to aby obrazek 4, 5, 6 przylagaly do obrazkow 1, 2 ,3.
Mam takie coś:
(IMG:http://wstaw.org/m/2015/12/19/Bez_nazwy-1.jpg)
A chce mieć takie coś:
(IMG:http://wstaw.org/m/2015/12/19/Bez_nazwy-2.jpg)

[HTML] pobierz, plaintext 
<div id="gallery">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/2.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 40%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/background.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/2.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 40%;">
			<img src="../images/background.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
			<img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
		</div>
[HTML] pobierz, plaintext 

css

[HTML] pobierz, plaintext 
#gallery{
margin-top: 10px;
margin-bottom: 40px;
width: 100%;
margin:0 auto;
text-align: center;
}
 
.gallery_photos{
background: #f7f8fa;
margin: 0.5%;
clear: none;
vertical-align: top;
}
[HTML] pobierz, plaintext 

[patwoj98]

Ja bym to zrobił Bootstrapem.
Przykład daję na jsfiddle.
JSFIDDLE
O to chodziło?

[NickOver]

.gallery_photos{
...
display:inline-block;
}
Tam gdzie chcesz mieć przerwę daj po prostu <br>

[matti9410]

chodzi mi o taki efekt jak na tym zdjęciu że górna część diva przylega do dolnej innego diva
(IMG:http://wstaw.org/m/2015/12/20/Przechwytywanie.PNG)

bo normalnie tworzy się oddstęp między nimi (leci od nowej lini) i odstęp zależy od największej wartości wysokości diva