Citat:
Ursprungligen postat av
ei96byod
Alternativ 1 är att lägga alla artiklar efter varandra och sedan styra med CSS att var tredje artikel ("nth-child") ska bryta. Man kan då ställa in att alla "article" ska vara t.ex. "float: left;" och sedan ställer man in en "clear" på var tredje article.
Detta fungerar dock inte i äldre versioner av internet explorer, så då måste man lägga till lite javascript för att det skall fungera där.
[...]
nth-child fungerar från och med ie9. De flesta tycker nog inte att man behöver bry sig om att skriva javascript för att stödja de 0.07% i Sverige använder ie8, men det kan man förstås göra (och det behöver man för övrigt göra om man har tänkt sig att använda html5-element i ie8 över huvud taget). Eller bara sätta en klass på var tredje article efter den första och clearfloata dem..
Jag tror att flexbox skulle kunna vara något för OP. Finns hyfsat stöd från ie10, helt OK efter det.
Dock behövs det nog mer än den förslagna layouten (OPs bild med tre artiklar i bredd) om man vill att sidan skall vara angenäm på mindre skärmar.
Dock - så här skulle man kunna ha det med flexbox (lite komprimerat skrivet för överblickens skull):
HTML:
Kod:
<body>
<header> header </header>
<main>
<aside> aside-text<br>mer aside-text </aside>
<section>
<article>a1</article>
<article>a2</article>
<article>a3</article>
<article>a4</article>
<article>a5</article>
<article>a6</article>
</section>
</main>
</body>
CSS:
Kod:
html, html * { box-sizing: border-box; }
header, aside, article {
padding: 1em;
outline: 1px solid #383; /* debug style */
}
main { display: flex; }
aside { flex: 1; }
section {
display: flex;
flex: 3;
flex-wrap: wrap;
}
article { flex: 33%; }
Ovan skulle behöva ett par mindre tillägg för att behaga även ie10.
/p
