reklama

CSS columns: jak omezit sloupcování jen na skupinu <P> mezi <H3>

1877 brie

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):
Kód: [Vybrat]
<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í

Kód: [Vybrat]

žá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

reklama



Re:CSS columns: jak omezit sloupcování jen na skupinu <P> mezi <H3>
« Odpověď #2 kdy: 30. 08. 2018, 09:15:35 »
Kód: [Vybrat]
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.

1877 brie

Re:CSS columns: jak omezit sloupcování jen na skupinu <P> mezi <H3>
« Odpověď #3 kdy: 30. 08. 2018, 11:28:21 »
Kód: [Vybrat]
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)

Re:CSS columns: jak omezit sloupcování jen na skupinu <P> mezi <H3>
« Odpověď #4 kdy: 30. 08. 2018, 11:48:54 »
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:

Kód: [Vybrat]
article {
  columns: 3;
}
           
h3 {               
  column-span: all;
  padding-right: 66%;
}


mareolan

Re:CSS columns: jak omezit sloupcování jen na skupinu <P> mezi <H3>
« Odpověď #5 kdy: 30. 08. 2018, 23:10:50 »
Mě funguje ta první ukázka (Chrome 68), konkrétně:
Kód: [Vybrat]
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).

Jirsák

Re:CSS columns: jak omezit sloupcování jen na skupinu <P> mezi <H3>
« Odpověď #6 kdy: 31. 08. 2018, 08:38:11 »
Mě funguje ta první ukázka (Chrome 68), konkrétně:
Kód: [Vybrat]
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).

8 let neimplementovaná CSS vlastnost? :D Proč lidi ten browser ještě používají :D

Fireli

Re:CSS columns: jak omezit sloupcování jen na skupinu <P> mezi <H3>
« Odpověď #7 kdy: 10. 09. 2018, 11:43:29 »
Musíš u :before prvku nezapomenout přidat
Kód: [Vybrat]
display: block;

 

reklama