Fordele tekst i kolonner uten å bruke tabeller(?)

En tråd i 'HTML/CSS' startet av Dan Åsen Hansen, 4 Mai 2019.

  1. Dan Åsen Hansen

    Dan Åsen Hansen Medlem

    Innlegg:
    874
    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
     
  2. Pong

    Pong Jeg selger sʇɥƃıluʍop :)

    Innlegg:
    3.426
    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.
     
  3. solo

    solo Medlem

    Innlegg:
    50
    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
     
    Tonny Kluften liker dette.
  4. ronorio

    ronorio Active Member

    Innlegg:
    180
    Hvis du bruker WordPress kan du gjøre dette direkte i editoren, til eks. Gutenberg.
     
  5. BlitZz

    BlitZz Member

    Innlegg:
    81
    Tonny Kluften og Daniel Johnsrud liker dette.
  6. Thor Erik Just Olsen

    Thor Erik Just Olsen Medlem

    Innlegg:
    365
    Hva er fordelen med flex kontra å bare bruke divtype table?
     
  7. Thor Erik Just Olsen

    Thor Erik Just Olsen Medlem

    Innlegg:
    365
  8. JudeQuinn

    JudeQuinn Medlem

    Innlegg:
    176
    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 og Thor Erik Just Olsen liker dette.
  9. BlitZz

    BlitZz Member

    Innlegg:
    81
    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>
     

Del denne siden