Ahoj, mám takový jasný dotaz, jak něco naformátovat v CSS do multi-column layoutu (ovšem ne celý článek, ale jednotlivé části a vtom je háček, popíšu níže), proto vysvětlím tajemný nadpis:
1. Mám toto html (zdůraznuji, že se do něj nesmí zasahovat, například rozdělit do section tagů každou skupinu H3 a P pod ním nebo za poslední tag P vkládat tag HR):
<article>
<h3>Nadpis 1.kapitoly</h3>
<p>série odstavců</p>
<p>série odstavců</p> <FORM />
<h3>Nadpis další kapitoly</h3>
<p>série odstavců</p>
<p>série odstavců</p><IMG />
<p>série odstavců, odstavečky</p>
<h3>Nadpis jiné kapitoly</h3>
<p>série odstavců</p>
<p>série odstavců</p>
<table>baf-překvapení</table>
<p>série odstavců, odstavečky</p>
</article>
Pro další pokračování je nutné přijmout myšlenku, že takto je ARTICLE vlastně rozdělen do kapitol (vždy nadpis H3 a odstavce P (semtam další tagy form, table, embed...), dokud nenarazí na další nadpis H3) – směrodatné je oddělení pomocí H3. — tedy vlastně jako by vždy kapitoly byla obalena tagem <SECTION> a stačilo by dát CSS article section {column-count:3} – ovšem výchozí HTML toto nemá a nemůže se do něja zasahovat (ani javascriptem...)
Chci docílit, aby se dokument (tag article) zobrazil ve 3 sloupcích ale pozor, ne triviálně, že stačí zadat CSS article {column-count:3} . — tohle mi rozsloupcuje celý dokument, že se třeba kapitoly bude zbytečně roztahovat moc vertikálně, já je chci rozsloupcovat jen každou kapitolu zvlášť, tudíž kapitola bude vertikálně roztažená méně a že H3 bude součástí kapitoly a bude tedy také ve sloupečku (tedy nebude roztažen přes celou šířku 3 sloupců) .
Téměř to řeší další pravidlo CSS: H3 {column-span:all} , které způsobí 2 věci:
1. ARTICLE bude podle H3 rozkouskován na části, které se budou INDIVIDUÁLNĚ sloupcovat (což chci)
2. bohužel roztáhne H3 na celou šířku(vysvětlím) – Já chci aby nadpis měl také třetinovou šířku a byl "INSETOVÁN"
dovnitř kapitoly
>>> V podstatě bych chtěl něco jako H3:before {clear:both} (symbolicky)
Bohužel jsem hledal CSS atributy, které by to mohly řešit: page-break, column-break, break-after, break-before, break-inside, ale neřeší to, nebo jsem to špatně použil. (ty způsobují, že přinutí každý H3 na nový sloupec)
Zde je ASCII-Artová znázornění
žádaná varianta:
HH1 111 111
111 111 222
111 111
HH2 2.2 3.3
1.1 2.2 3.3
1.1 IMG
2.2 3.3
při použití ARTICLE–column-count:3
HH1 222 1.1
111 222 2.2
111 HH2 2.2
111 1.1 2.2
111 1.1 3.3
111 IMG 3.3
222 1.1
při použití ARTICLE–column-count:3 a H3–column-span all:
---HH1-----
111 222 222
111 222 333
222 222 33
--HH2---
1.1 1.1 2.2
1.1 2.2 2.2
IMG 2.2