Wie erstellt man ein 3-Spalten-Layout in CSS?

Question

Ich habe versucht, eine komplexe Benutzeroberfläche für mein Programm zu machen, und ich wollte 3 Spalten mit CSS in meinem Design haben.

Dies ist derzeit mein Code:

<div style="width:100px;">stuff</div> 
<div style="width:100px;">stuff</div> 
<div style="width:100px;">stuff</div> 

Aber aus irgendeinem Grund, werden drei verschiedene Linien von Sachen anzuzeigen.

Ich habe versucht, einige Dinge zu ändern, aber es schien nicht bei allen dort Ich möchte

zu arbeiten nur 3 Spalten auf dem gleichen Block sein.

Answer 1

Wenn Sie auf dem Bildschirm 3 differnet Bereiche haben wollen, die effektive Methode für das zu tun wäre:

<style> .third { width: 33.33%; float: left; } </style> 

<div class="third"> Something </div> 
<div class="third"> Something </div> 
<div class="third"> Something </div> 

Die class="third" die CSS ist das Hinzufügen, die innerhalb der {} ‚s ist, dass ich gemacht. - Das bedeutet, dass jeder der divs die width: 33.33% (1/3 des Bildschirms) und eine float: left gegeben wird, die nur die Bereiche verschieben wird, um aus dem normalen CSS- und HTML-Bereich des Stapelns übereinander zu kommen.

Hoffe, das hilft! :)

Answer 2

Alternativ könnten Sie sie alle auf einmal ohne Angabe einer Klasse wie von Jek erwähnt. Wenn Sie Styling im HTML verwenden, können Sie dies im Header tun:

<style> div{ width:100px } </style>

Sie könnten das gleiche tun, wenn Sie ein externes Stylesheet verwenden. Allerdings, wenn Sie die divs auf unterschiedliche Weise stylen müssen mit Klasse und ID wäre eine bessere Option. Wenn alle divs auf die gleiche Weise formatiert sind, style einfach das Tag, das in deinem Fall div ist.

Answer 3

Es gibt ein paar Möglichkeiten, um das zu erreichen, was Sie wollen.

Methode 1: Float und Breite

eine einzelne Spalte Klasse zuordnen

.column {  
    width: 33.3%; 
    float: left; 
} 

Markup drei divs mit der Klasse

<div class="column">Column 1</div> 
<div class="column">Column 2</div> 
<div class="column">Column 3</div> 

Methode 2: Inline Block

Manchmal sind Schwimmer nicht die beste Option. Sie können auch die Anzeigeeigenschaft auf inline-block setzen, obwohl dies manchmal leave unwanted gaps zwischen den Divs sein kann.

.column {  
    width: 33.3%; 
    display: inline-block; 
} 

Same HTML-Markup

<div class="column">Column 1</div> 
<div class="column">Column 2</div> 
<div class="column">Column 3</div> 

Methode 3: Flexbox

Flexbox according to Chris Coyier of CSS-tricks:

Die Flexbox Layout (Flexible Box) Modul (derzeit W3C Last Call Working Draft) zielt darauf ab, einen effizienteren Weg zu schaffen, Ali gn und verteilt Platz zwischen den Objekten in einem Container, auch wenn ihre Größe unbekannt und/oder dynamisch ist (daher das Wort "flex").

.row { 
    display: -ms-flex: // Vendor prefixes required for flexbox 
    display: -webkit-flex; 
    display: flex: 
} 
.column {  
    width: 100px; 
    display: -ms-inline-flex; 
    display: -webkit-inline-flex; 
    display: inline-flex; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
} 

In den übergeordneten div auf Ihre HTML-Markup

<div class="row"> 
    <div class="column">Column 1</div> 
    <div class="column">Column 2</div> 
    <div class="column">Column 3</div> 
</div> 

Coole Sache über Flexbox Sie ist nicht füllen den Raum müssen schrittenen Prozentsätze verwenden, kann es Raum, um Ihre Spalten aus mit justify-content: space-between;

Mit flexbox gibt es noch viel mehr zu tun. Floats sind sehr einfach, aber da Sie den Aufbau einer Benutzeroberfläche erwähnt haben, gibt Ihnen etwas wie flexbox ein breiteres Spektrum an Werkzeugen, mit denen Sie arbeiten können.