uitvullen li's

Status
Niet open voor verdere reacties.

musickangaroe

Gebruiker
Lid geworden
4 jan 2017
Berichten
8
Ik heb een pagina met blokken die ontworpen zijn als een unordered list. Elk blok is een <li> element. Tegenwoordig een vrij standaard ontwerp dat makkelijk responsive te maken is.

Probleem is dat bij verschillende content de blokken een verschillende hoogte kunnen krijgen wat erg lelijk oogt.

Is er een manier om te zorgen dat alle blokken de hoogte van het hoogste blok overnemen?
 
Voorbeeld met jQuery:
Code:
<ul id="menu1">
  <li><a href="#">blah blah blah blah blah blah blah blah</a></li>
  <li><a href="#">blah blah</a></li>
  <li><a href="#">blah blah blah blah blah blah</a></li>
  <li><a href="#">blah blah blah blah</a></li>
</ul>

$(document).ready(function(){
  var LiHeight, MaxHeight = 0;
  $("#menu1 a").each(function(){
    LiHeight = $(this).innerHeight();
    MaxHeight = ( LiHeight > MaxHeight ) ? LiHeight : MaxHeight;
  });
  $("#menu1 a").innerHeight(MaxHeight+'px');
});
In css kan het ook (snellere response):
- met "rij in rij" div blokken, of
- met een display table lijst.

Kan van de css methodes geen voorbeeld geven omdat ik niet weet hoe je layout eruit ziet.

Suc6. Have fun.
 
Laatst bewerkt:
Hi bron,

Dank je, dit werkt. Maar ik ben toch wel nieuwsgierig naar die andere oplossingen omdat die mogelijk wat intuitiever werken.

Ik gebruik dit soort blokken in verschillende situaties. Niet in menu's maar in webshops en CMS achtige toepassingen.

Het basisidee is steeds dat ik een unsorted list van <li> blokken met een vaste breedte heb. Als het scherm smaller wordt passen er minder op een regel en gaan ze vanzelf naar de volgende regel.

Binnen die <li>'s vind je plaatjes en tekst en omdat die tekst niet altijd even lang is hebben die <li>'s een verschillende hoogte. Dat ziet er niet uit en het heeft ongewenste effecten op de overloop naar de volgende regel.
 
In de bijlage een Row-in-Row voorbeeld waarin ik gebruik maak van het responsive Bootstrap grid. Je kunt dit zelf aanpassen bij meer of minder tekstblokken per rij. Bij een Row-in-Row is een <ul> minder handig maar misschien kan je in jouw layout toch een <ul> gebruiken. In het voorbeeld heb ik een <section> gebruikt voor de tekstblokken.

Suc6. Have fun.
 

Bijlagen

  • tekstblokken.zip
    1,5 KB · Weergaven: 31
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan