Fórum Root.cz
Hlavní témata => Vývoj => Téma založeno: 1877 brie 29. 08. 2018, 21:54:40
-
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
-
Myslim ze hledas toto: https://css-tricks.com/snippets/css/complete-guide-grid/
-
article {
columns: 3;
}
h3:before {
column-span: all;
}
Ale je to hack, můžete s tím mít problémy později, až budete chtít upravit třeba ještě něco dalšího. Správné by bylo opravit to HTML, protože chyba je v něm.
-
article {
columns: 3;
}
h3:before {
column-span: all;
}
To mi nefunguje, pouze se celý article to rozdělí na 3 sloupce, ale H3:before nedělá nic (bez toho i s tím vypadá dokument stejně). , testováno na článku z internetu i na od píky vytvořeném dokumentu. Mám Chromium 63 ,Tobě to jde? Resp nechybí tam ještě něco (zkoušel jsem například width,clear,display)
-
Hm, zkoušel jsem, že když ten column-span změním z h3 na h3:before, tak se nadpis zalomí, ale přehlédl jsem, že přestane fungovat ukončení sloupců. A to jsem byl ještě překvapený, že to funguje…
Tak takhle:
article {
columns: 3;
}
h3 {
column-span: all;
padding-right: 66%;
}
-
Mě funguje ta první ukázka (Chrome 68), konkrétně:
article {
column-count: 3;
}
h3:before {
column-span: all;
content: "";
display: block;
height: 1.7em; /* dle libosti pro vertikalni odsazeni */
}
Ale např. ve Firefoxu tohle nepůjde, protože nepodporuje column-span (#616436 (https://bugzilla.mozilla.org/show_bug.cgi?id=616436)).
-
Mě funguje ta první ukázka (Chrome 68), konkrétně:
article {
column-count: 3;
}
h3:before {
column-span: all;
content: "";
display: block;
height: 1.7em; /* dle libosti pro vertikalni odsazeni */
}
Ale např. ve Firefoxu tohle nepůjde, protože nepodporuje column-span (#616436 (https://bugzilla.mozilla.org/show_bug.cgi?id=616436)).
8 let neimplementovaná CSS vlastnost? :D Proč lidi ten browser ještě používají :D
-
Musíš u :before prvku nezapomenout přidat
display: block;