Just nu i M3-nätverket
Gå till innehåll
Hjalllle

Organisera bilder i HTML och CSS

Rekommendera Poster

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%;    
}

post-139346-0-48376300-1487767355_thumb.jpg

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

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.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...