Tekst in kolom doorlopen in andere kolom
Graag zou ik een kolom (div) met gegevens over willen laten lopen in een andere kolom.
Ik heb nu een lijst met jarigen.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
januari februari maart
a g j
b h k
c i l
d m
e
f
a g j
b h k
c i l
d m
e
f
Deze lijsten zijn te lang om op 1 pagina (a4) te krijgen en kun je dus nooit mooi uitprinten.
Nou zou ik dit graag als volgt willen zien
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
januari e i
a f maart
b februari j
c g k
d h l
<page-break>
m
april
n
o
p
a f maart
b februari j
c g k
d h l
<page-break>
m
april
n
o
p
Hoor het graag.
Dit is even in de Javascript categorie geplaatst, maar als het in CSS kan zou nog mooier zijn.
Gewijzigd op 02/09/2015 17:25:47 door Michael -
Code (php)
1
p { columns: 33%; column-count: 3; }
Een stuk leesvoer wat je echt zal helpen: http://alistapart.com/article/goingtoprint
Mijn voorbeeldje, speciaal voor jou: http://codepen.io/anon/pen/NGPKMR
Gewijzigd op 02/09/2015 20:56:49 door Eddy E
@Eddy, ik wist eerlijk gezegd niet dat css een 'columns' optie had. Ik zal dit eens opzoeken en uitproberen.
Je 'maanden' zijn uiteraard gewoon <h2>maart</h2>.
De rest staat in een <p>.
Uit frustratie heb ik je hele code even exact overgenomen.
Maar zoals je hier ziet wordt het gewoon onder elkaar geplaatst.
Zie ik iets over het hoofd?
Ik gebruik chrome inderdaad en je voorbeeld op codepen geeft t wel in 3 kolommen weer.
Toevoeging op 03/09/2015 21:20:52:
Als ik 'columns: 3' vervang door het volgende werkt het wel!
Code (php)
1
2
3
2
3
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
Toevoeging op 03/09/2015 21:26:59:
Dan heb ik nog één ding. 12 maanden passen natuurlijk nooit op één bladzijde.
Hoe krijg ik het nou verdeelt over meerder pagina's? Wat doe ie page-break-inside: auto; dan eigenlijk?
Als ik trouwens een print-voorbeeld opvraag valt alles weer uit elkaar dus is nog niet printbaar, maar daar kijk ik nog wel even naar.
Wat gebeurt er als je div.a4 verwijderd? Maar wel de inhoud laat staan?
(makkelijkste is dus even de class="a4" verwijderen)
Quote:
It seems like the developer of columns in Webkit (Dave Hyatt) disabled columns when printing, because he couldn't implement page breaking properly: https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854
I'm surprised that in more than 5 years, no solution has been found...
I'm surprised that in more than 5 years, no solution has been found...
Een 'oplossing' hiervoor is IE gebruiken om te printen, maar ik ga er sowieso nog een PDF versie van maken.
Bedankt voor je antwoorden, voorbeeld en geduld!