• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Divs met gelijke hoogte in verschillende list-items.

Status
Niet open voor verdere reacties.

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
Hoi,

Ik heb onderstaande ul (even heel basic) en in elk list-item staat een div met content. Omdat de content per div verschilt, worden de divs dus ook verschillend in hoogte. Hoe kan ik ervoor zorgen dat de drie divs dezelfde hoogte krijgen?

De mogelijkheid met Flexbox heb ik al bekeken, maar ben er niet in geslaagd om dat werkend te krijgen omdat de divs niet dezelfde parents hebben.

Iemand een suggestie? Liever geen JS, maar flexbox hoeft ook niet. Ook de constructie met de ul is niet heilig. De hoogte moet wel automatisch wijzigen zodra de content aangepast wordt.

Code:
<ul class="test">
<li><div>tekst</div></li>
<li><div>tekst<br />nog meer tekst</div></li>
<li><div>tekst</div></li>
</ul>
 
Wat ik je zou adviseren is het volgende: Stop de hele boel in een tabel. Dan kan je iedere cel specifiek een waarde meegeven in hoogte en breedte en wordt alles netjes gelijk.
 
Dat zou een optie kunnen zijn, maar in een reponsive site, want dat is het doel, is een tabel toch niet de meest ideale oplossing?
 
Laatst bewerkt door een moderator:
Je zou gebruik van "Responsive Classes" kunnen maken.
Op w3schools.com staat dit mooi omschreven. Via deze site kan je ook zelf een script uit proberen via de "Try It Yourself"-button.
Een voorbeeld voor 3 gelijke containers vind je hier

In dit voorbeeld is de eerste kolom rood gekleurd door middel van de code w3-red in regel 12:

Code:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
<h2>Mobile First Responsiveness</h2>
<p class="w3-large">Try to resize the window!</p>
</div>

<div class="w3-row w3-border">
<div class="w3-third w3-container [COLOR="#FF0000"]w3-red[/COLOR]">
  <h2>w3-third</h2>  
  <p>The w3-third class uses 33% of the parent container.</p>
  <p>On screens smaller than 601 pixels it resizes to full screen.</p>
</div>
<div class="w3-third w3-container">
  <h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
  <h2>w3-third</h2>
</div>
</div>

</body>
</html>

Als voorbeeld heb ik de rode kleur uit kolom 1 weg gehaald, de tekst boven de kolommen geel gemaakt en een header en footer toe gevoegd, beide in een blauwe kleur.
Om het effect te bekijken:
- Verwijder de tekst in het "Try It Yourself" gedeelte
- Copier en plak onderstaande code:

Code:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container w3-blue">
<H1>Header</H1>
</div>

<div class="w3-container w3-yellow">
<h2>Divs met gelijke hoogte in verschillende list-items.</h2>
<p class="w3-large">Verander de schermbreedte om het effect te bekijken.</p>
</div>

<div class="w3-row w3-border">
<div class="w3-third w3-container">
  <h2>Kolom 1</h2>  
  <p>In deze kolom komt de tekst voor kolom 1</p>
</div>
<div class="w3-third w3-container">
  <h2>Kolom 2</h2>
<p>In deze kolom komt de tekst voor kolom 2.<p>
<p>Hierin staat wel meer tekst dan in kolom 1 en 3, waardoor de hoogtes van kolom 1 en 3 worden aangepast aan deze kolom.</p>
<p>Op schermen met een lagere resolutie dan 601 pixels komen de 3 kolommen onder elkaar te staan.</p>
</div>
<div class="w3-third w3-container">
  <h2>Kolom 3</h2>
<p>In deze kolom komt de tekst voor kolom 3</p>
</div>
</div>

<div class="w3-container w3-blue">
<H1>Footer</H1>
</div>

</body>
</html>

Klik nou op "Run >>"
 
Laatst bewerkt door een moderator:
Daar ga ik mee aan de slag, ziet er goed uit! Tenx Gouwepeer!
 
Succes.
Let wel op dat het volgende tussen <html> en <body> moet komen te staan:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
Die stylesheet is belangrijk omdat daarmee het .css word geladen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan