Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Problem z obrazkami
Forum PHP.pl > Forum > Przedszkole
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ś:

A chce mieć takie coś:


  1. <div id="gallery">
  2. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  3. <img src="../images/portret/2.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  4. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  5. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 40%;">
  6. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  7. <img src="../images/background.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  8. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  9. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  10. <img src="../images/portret/2.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  11. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 40%;">
  12. <img src="../images/background.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  13. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  14. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  15. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  16. <img src="../images/portret/1.jpg" class="gallery_photos" style="width: 18.5%; height: 19%;">
  17. </div>


css

  1. #gallery{
  2. margin-top: 10px;
  3. margin-bottom: 40px;
  4. width: 100%;
  5. margin:0 auto;
  6. text-align: center;
  7. }
  8.  
  9. .gallery_photos{
  10. background: #f7f8fa;
  11. margin: 0.5%;
  12. clear: none;
  13. vertical-align: top;
  14. }
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


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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.