Fordele tekst i kolonner uten å bruke tabeller(?)

[Dan Åsen Hansen]

Litt klønete forklart kanskje, men poenget er at jeg sitter på en del lister som skal fordeles på tre kolonner i stedet for å bare stå over hverandre.

Altså;

Oppføring1
Oppføring2
Oppføring3
Oppføring4
Oppføring5
Oppføring6
Oppføring7
Oppføring8
Oppføring9
Oppføring10
Oppføring11
Oppføring12
Oppføring13
Oppføring14
Oppføring15
Oppføring16
Oppføring17
Oppføring18
Oppføring19
Oppføring20
Oppføring21
Oppføring22
Oppføring23
Oppføring24
Oppføring25
Oppføring26
Oppføring27
Oppføring28

Skal bli til:

Oppføring1 Oppføring11 Oppføring21
Oppføring2 Oppføring12 Oppføring22
Oppføring3 Oppføring13 Oppføring23
Oppføring4 Oppføring14 Oppføring24
Oppføring5 Oppføring15 Oppføring25
Oppføring6 Oppføring16 Oppføring26
Oppføring7 Oppføring17 Oppføring27
Oppføring8 Oppføring18 Oppføring28
Oppføring9 Oppføring19
Oppføring10 Oppføring20

Selv om teksten blir skrevet inn som listen øverst.

Jeg vet jeg kan bruke tabeller, men det er lite egnet ettersom oppføringene skal stå i alfabetisk rekkefølge, og de vil være dynamiske i den forstand nye oppføringer vil komme til hele tiden, samtidig som andre vil bli slettet.

Noen idé om hvordan jeg kan få til dette?

Mvh Dan

 

[Pong]

Kanskje få noe skript til å gjøre dette for deg, hvis du ikke har lyst å markere tekstene.
Tre div'er med litt formattering i en wrapper er vel alt som skal til.

 

[solo]

CSS
div.flex_row{
display: flex;
background: #f6f6f7;
}
div.flex_col{
flex: 1;
background: #fff;
border-radius: 5px;
border: #eaeef2 1px solid;
box-shadow: 0 2px 3px rgba(0,0,0,0.03);
padding: 10px 10px 10px 10px;
margin: 0px 20px 20px 20px;
}

@media screen and (max-width: 52.375em) {
div.first_row_flex_row{
display: inline-block;
}
div.flex_col_white_bg{
flex: 0;
}
}

HTML
<div class="flex_row">
<div class="flex_col">
Innhold
</div>
<div class="flex_col">
Innhold
</div>
<div class="flex_col">
Innhold
</div>
</div>

<div class="flex_row">
<div class="flex_col">
Innhold
</div>
<div class="flex_col">
Innhold
</div>
<div class="flex_col">
Innhold
</div>
</div>

Når det kommer til sortering så løses det fint ved å putte enten:
a) alt i en tekstfil. Les det ut derfra med php, sorter, og print ut via for-løkke
b) alt inn i en database. Les det ut med php/mysqli og print ut i en while løkke

 

[ronorio]

Hvis du bruker WordPress kan du gjøre dette direkte i editoren, til eks. Gutenberg.

 

[BlitZz]

Bruk CSS grid. Det er basically dette det er laget for.

.wrapper-element {
display: grid;
grid-template-columns: auto auto auto;
}


Demo: https://codepen.io/BlitZZ96/pen/jOPPaXw

 

[Thor Erik Just Olsen]

Hva er fordelen med flex kontra å bare bruke divtype table?

 

[Thor Erik Just Olsen]

Nice!

 

[JudeQuinn]

Hva er fordelen med flex kontra å bare bruke divtype table?

Det er lettere for tabulær data enn å bruke Flexbok, ellerold school floats. I motsetning til en vanlig tabell (<table>), vil du i tillegg kunne optimalisere bedre for mobiler ved å bruke et annet grid eller skjule enkelte kolonner.

 

[BlitZz]

Hva er fordelen med flex kontra å bare bruke divtype table?

Også, ved å bruke flex vil du få mye ryddigere html da alt kan være søsken istedenfor å måtte nøste elementer under hverandre. Bonusen med dette er at du har styling en plass og markup en annen.

Pseudo-eksempel:
<table>
<tr>
<td>Rad 1 - Kolonne 1</td>
<td>Rad 1 - Kolonne 2</td>
</tr>

<tr>
<td>Rad 2 - Kolonne 1</td>
<td>Rad 2 - Kolonne 2</td>
</tr>
...
</table>

vs

.my-table {
display: grid;
grid-template-columns: auto auto;
}

<div class="my-table">
<div>Rad 1 - Kolonne 1</div>
<div>Rad 1 - Kolonne 2</div>

<div>Rad 2 - Kolonne 1</div>
<div>Rad 2 - Kolonne 2</div>
...
</div>