Organisera bilder i HTML och CSS

[Hjalllle]

Hej!

Jag har ett problem med positioneringen av bilderna på en hemsida jag jobbar med. Jag har lagt de i <div> taggar och givit dem attribut i grupper om tre för att lägga dem efter varandra på en rad. De lägger sig direkt efter varandra de första två raderna men sen skapas ett hål där första bilden ska ligga på tredje raden. Varför blir det så?

 

P.S. exempelbilden som finns härunder är bara för att illustrera vad jag menar, den speglar INTE koden.

 

ex. HTML

<div class="row">
    <img src="bilder/pascen/vagen3anp.png" onclick="openModal();currentSlide(1)" class="hover-shadow">
  </div>
  <div class="row">
    <img src="bilder/pascen/vagen2anp.png" onclick="openModal();currentSlide(2)" class="hover-shadow">
  </div>
  <div class="row">
    <img src="bilder/pascen/vagenanp.png" onclick="openModal();currentSlide(3)" class="hover-shadow">
  </div>
              
  <div class="row2">
    <img src="bilder/pascen/anonymanp.png" onclick="openModal();currentSlide(4)" class="hover-shadow">
    </div>
  <div class="row2">
    <img src="bilder/pascen/lampaanp.png" onclick="openModal();currentSlide(5)" class="hover-shadow">
    </div>
  <div class="row2">
    <img src="bilder/pascen/leanp.png" onclick="openModal();currentSlide(6)" class="hover-shadow">
    </div>
              
  <div class="row3">
    <img src="bilder/pascen/titanicanp.png" onclick="openModal();currentSlide(7)" class="hover-shadow">
    </div>
  <div class="row3">
    <img src="bilder/pascen/titanic2anp.png" onclick="openModal();currentSlide(8)" class="hover-shadow">
    </div>
  <div class="row3">
    <img src="bilder/pascen/titanic3anp.png" onclick="openModal();currentSlide(9)" class="hover-shadow">
    </div>

 

 

ex. CSS

.row {
  position: relative;
  margin-top: 2300px;

  padding-left: 40px;
  float: left;
  width: 25%;
}
.row2 {
  position: relative;
  margin-top: 40px;
  padding-left: 40px;
  float: left;
  width: 25%;
}
.row3 {
  position: relative;
  margin-top: 40px;
  padding-left: 40px;
  float: left;
  width: 25%;    
}

[Signe_1]

Länk till koden?

[Hjalllle]

Länk till koden?

 

Sorry, är nykomling därför kommer nu newbie-fråga: hur gör man det?

[Jonas__B]

det verkar inte vara skillnad på row2 och row3, således behövs inte row3.

 

Gällande din fråga om hål misstänker jag att första bilden är högre än övriga på första raden. Framgår inte av koden.