Afbeeldingen naast elkaar

Status
Niet open voor verdere reacties.

bogultay

Nieuwe gebruiker
Lid geworden
1 apr 2017
Berichten
1
Hoi!!

Ik wil 3 afbeeldingen naast elkaar zetten, wat ik ook doe ze blijven onder elkaar!

Dit is mijn HTML:
<section id="voorstellingen">
<article class="agenda teun">
<img src="kleineteun.jpg" width="320px">
</article>
<article class="agenda mama">
<img src="mamas.jpg" width="320px">
</article>
<article class="agenda papieren">
<img src="papierenkroon.jpg" width="320px">
</article>
</section>

En dit mijn CSS:
section.voorstellingen {
padding: 0;
margin: auto;
display: inline-block;
position: relative;
text-align: center;
}

Daarboven zit nog een afbeelding met een breedte van 1000px en tussen de 3 afbeeldingen wil ik tussenruimte
 
display: inline-block is een nette manierom items naast elkaar te zetten maar je hebt dan vaak onverwachte spaties tussen de artikelen waardoor het niet lukt.
oplossing 1: zet </article><article....> zonder spatie tegen elkaar en geef ze een display: inline-block
oplossing 2: gebruik float: left maar die heeft het nadeel dat de section niet even hoog is als de articles. Dit kan je oplossen met een "clear".
Het kan bijvoorbeeld zo
Code:
--- html ---

<section id="bigphoto">
  <img src="bigphoto.jpg" alt="">
</section>
<section id="voorstellingen">
  <article class="agenda teun">
    <img src="kleineteun.jpg" alt="">
  </article>
  <article class="agenda mama">
    <img src="mamas.jpg" alt="">
  </article>
  <article class="agenda papieren">
    <img src="papierenkroon.jpg" alt="">
  </article>
</section>

--- css ---

#bigphoto,
#voorstellingen {
   width: 100%;
}
#voorstellingen {
   margin-top: 15px;
}
#voorstellingen article {
   float: left;
   width: 32%;
   padding-left: 2%;
}
#voorstellingen article:first-child {
   padding-left: 0%;
}
/* responsive img */
#bigphoto img,
#voorstellingen img {
   width: 100%;
   height: auto;
   border: 0;
   display: block;
}
/* hieronder om de float te clear'en */
#voorstellingen:after,
#voorstellingen:before {
   display: table;
   content: " ";
}
#voorstellingen:after {
   clear: both;
}

** toegevoegd: witruimte tussen foto's en grote foto erboven.

Bij de <img> kan je width="320px" weghalen en alt="" erbij zetten.

Suc6. Have fun.
 
Laatst bewerkt:
display: inline-block is een nette manierom items naast elkaar te zetten maar je hebt dan vaak onverwachte spaties tussen de artikelen waardoor het niet lukt.

Je kunt die marges (die ook nog eens per browser verschillen) voorkomen door font-size:0; toe te passen op de container. Als er tekst in zit moet je dat daar natuurlijk wel weer voor compenseren in de kinderen.
 
Een simpelere doch net zo goed werkende oplossing is dit
Code:
article {
  display: inline-block;
  vertical-align: top;
}
 
Een simpelere doch net zo goed werkende oplossing
Werkt niet, lees uitleg boven of test zelf "inline-block" even met
Code:
section {
  width: 100%;
}
article {
  width: 33.333%;
  display: inline-block;
  vertical-align: top;
}
 
Je kunt die marges (die ook nog eens per browser verschillen) voorkomen door font-size:0; toe te passen op de container.
Yep, dit werkt ook maar zoals je al zei moet bij elk <article> het font weer goed gezet worden, dat is extra code.
Als je dit gebruikt, dan voor cross-browser: #voorstellingen: font: 0/0 'a';
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan