Just nu i M3-nätverket
Jump to content

Organisera bilder i HTML och CSS


Hjalllle

Recommended Posts

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

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...