Beispielcode zum Implementieren eines gleichbreiten Layouts auf verschiedene Arten mithilfe von CSS

<Stil>
    Körper,div{
        Rand: 0;
        Polsterung: 0;
    }
    .Tabellenlayout{
        Anzeige: Tabelle;/*Das übergeordnete Element muss auf Tabelle gesetzt werden*/
        table-layout: fixed;/*Dieses Attribut muss vorhanden sein, sonst wird der Effekt nicht erzielt*/
        Breite: 50%;
        Rand: 20px automatisch;
    }
    .table-cell-layout{
        Anzeige: Tabellenzelle;/*Das untergeordnete Element muss auf Tabellenzelle eingestellt werden*/
        Höhe: 40px;
        Rand: 1px durchgezogen #666;
        Rand links: keiner;
    }
    .table-cell-layout:erstes-kind{
        Rahmen links: 1px durchgezogen #666;
    }
</Stil>

<Text>
    <ul Klasse="Tabellenlayout">
        <li Klasse="Tabellenzellenlayout">li1</li>
        <li class="Tabellenzellenlayout">li2</li>
        <li class="table-cell-layout">li3</li>
        <li class="table-cell-layout">li4</li>
        <li class="table-cell-layout">li5</li>
    </ul>
</body>

<Stil>
    Körper,div{
        Rand: 0;
        Polsterung: 0;
    }
    .flex-layout{
        Anzeige: Flex;
        Breite: 50%;
        Rand: 20px automatisch;
    }
    .flex-item{
        biegen: 1;
        Höhe: 40px;
        Rand: 1px durchgezogen #666;
        Rand links: keiner;
    }
    .flex-item:erstes-kind{
        Rahmen links: 1px durchgezogen #666;
    }
</Stil>

<Text>
    <ul Klasse="Flex-Layout">
        <li Klasse="flex-item">li1</li>
        <li Klasse="flex-item">li2</li>
        <li Klasse="flex-item">li3</li>
        <li Klasse="flex-item">li4</li>
        <li Klasse="flex-item">li5</li>
    </ul>
</body>