Kolom display: inline-block;

Door Gamebuster op maandag 13 januari 2014 17:03 - Reacties (9)
Categorie: webdev, Views: 4.432

HTML en CSS zitten vol met veelgebruikte hacks. De welbekende float kolommen layout is daar waarschijnlijk de grootste van.

Hierbij zet je float: left; op meerdere kolommen om ze naast elkaar te krijgen en bam: je hebt een float-layout. Dit zorgt echter vaak voor vreemde issues, die je dan weer moet voorkomen met <br clear=all> of <div style="clear: both;"> of vergelijkbare hacks. Verder heb je geen controle (?) over de verticale positionering van je elementen.

Daarom vraag ik me het volgende af:
Waarom gebruikt men geen inline-block voor een kolommen layout?

Zie voorbeeld: http://jsfiddle.net/6LtVJ/1/

Het lijkt allemaal prima te werken met display: inline-block;. Je hebt zelfs controle over de verticale positionering met css's vertial-align. Ik kan me niet direct echt nadelen bedenken... Wie wel?

Volgende: Thee. 01-'14 Thee.
Volgende: Wie laat zich niet koeioneren? 01-'14 Wie laat zich niet koeioneren?

Reacties


Door Tweakers user Marq, maandag 13 januari 2014 17:16

Omdat IE7 het niet support. Of je het kunt gebruiken hangt dus af van welke browsers je wilt supporten.

De website 'caniuse.com' is erg handig voor het beantwoorden voor dergelijke vragen. Zo zie je bijvoorbeeld dat IE8+ inline-block gewoon ondersteund.

Door Tweakers user GateKeaper, maandag 13 januari 2014 17:16

Omdat 'display: inline-block;' pas sinds IE8 ondersteund wordt.

http://caniuse.com/#search=inline-block

@Mark_L, great minds think alike?

[Reactie gewijzigd op maandag 13 januari 2014 17:17]


Door Tweakers user orf, maandag 13 januari 2014 18:03

Ik vind floats gebruiken nou niet echt hacky. Je kunt de float ook clearen met een overflow op de parent. Dan heb je geen extra markup nodig.

Twitter Boostrap (en anderen) heeft een clearfix: http://getbootstrap.com/css/

Door Tweakers user kipusoep, maandag 13 januari 2014 22:42

Ik gebruik inline-block heel erg veel. Vooral ideaal met responsive layouts.
Floating heeft een groot nadeel:
Stel je hebt 2 kolommen en 3 elementen. Het laatste (3e) element zal naar de volgende 'regel' vallen, so far so good. Maar als het eerste element hoger is dan het tweede, komt het derde element onder het tweede element terecht (rechterkant dus).
Met inline-block heb je dat probleem niet, daarom heb ik hier ook gekozen voor inline-block: http://www.infocaster.net/

Door Tweakers user Marq, maandag 13 januari 2014 23:32

CSS is een stuk ingewikkelder dan de meeste mensen denken. Veel mensen denken dat CSS erg simpel is, omdat ze de meeste dingen wel voor elkaar krijgen.
Wanneer je echt wilt begrijpen waarom dingen werken zoals ze werken, ben je wel even zoet. Denk hierbij aan het volledig begrijpen van dingen als relative / fixed / absolute positioning, floating, hoogtes van 100% etc etc.
Aan het begin ben je vooral bezig met 'trukjes' te leren, maar naarmate je verder komt, snap je steeds beter wat er gebeurd, waarna je steeds makkelijker zelf allerlei constructies kunt bedenken.

@kipusoep: de basis van werken met floats is zorgen dat je een 'clearfix' class in je CSS hebt staan. Daarna is het vrij simpel. Jouw voorbeeld zou als volgt werken:

<div class='clearfix row'>
<div class='column'></div>
<div class='column'></div>
</div>
<div class='clearfix row'>
<div class='column'></div>
</div>

Door Tweakers user Gamebuster, dinsdag 14 januari 2014 10:09

Hippe site hoor, ziet er goed uit

[Reactie gewijzigd op dinsdag 14 januari 2014 11:16]


Door Tweakers user The_Source, dinsdag 14 januari 2014 16:34

Voor IE 6 / IE7 heb je dan iets meer code voor nodig.

En wat Mark_L zegt is CSS vaak ingewikkelder dan mensen denken. Er zijn niks voor niks frameworks, preprocessors (LESS / Sass) om het te versimpelen.

Door Tweakers user WeeJeWel, dinsdag 14 januari 2014 21:22

Als je op IE display: inline zet, werkt dat op veel punten hetzelfde als inline-block :P

Door Tweakers user Jogai, woensdag 15 januari 2014 11:35

Mijn favoriete clearfix is deze: http://nicolasgallagher.com/micro-clearfix-hack/

Gister zat ik nog eens in de statistieken te kijken voor een website die ik als vrijwilliger onderhoud. 98,5% gebruikt nieuwere browsers dan IE7. Ik ga dus nu toch de ondersteuning stoppen. Ik moet nu een nieuwe layout bouwen, dus misschien komt dit wel van pas.

Reageren is niet meer mogelijk