Gleiche Höhe Spalten mit Anzeige: Tabelle. width

Question

versuchen, herauszufinden, warum Spalten unterschiedliche Breite haben, und wie man sie gleich breit machen.

.col-container { 
 
    display: table; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.col { 
 
    display: table-cell; 
 
}

<div class="col-container"> 
 
    <div class="col col1"> 
 
    <h2>Column 1</h2> 
 
    <p>Hello World</p> 
 
    </div> 
 

 
    <div class="col col2"> 
 
    <h2>Column 2</h2> 
 
    <p>Hello World!</p> 
 
    </div> 
 

 
    <div class="col col3"> 
 
    <h2>Column 3</h2> 
 
    <p>Some other text..</p> 
 
    </div> 
 
</div>

Answer 1

Sie die table-layout:fixed; Eigenschaft verwenden können, sollte es die Spalten Spray gleichmäßig (Frage Stichwort:gleiche Breite). Sie können auch eine width hinzufügen, um es zu sichern. border-spacing sollte innerhalb der width Berechnung enthalten sein, wenn Sie es auch verwenden.

https://www.w3.org/TR/CSS2/tables.html#propdef-table-layout

17.5.2.1 Fest Tabellenlayout

Mit diesem (schnell) Algorithmus, das horizontalen Layout der Tabelle hängt nicht von dem Inhalt der Zellen; es hängt nur von der Breite der Tabelle, der Breite der Spalten und den Grenzen oder dem Zellenabstand ab.

.col-container { 
 
    display: table; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    table-layout: fixed; 
 
} 
 

 
.col { 
 
    display: table-cell; 
 
    border: solid; 
 
} 
 

 
.w { 
 
    margin-top: 1em; 
 
    border-spacing: 2px; 
 
} 
 
/* add width and border-spacing */ 
 
.w.col { 
 
    width: 33.33%; 
 
    box-sizing: border-box; 
 
}

<div class="col-container"> 
 
    <div class="col col1"> 
 
    <h2>Column 1</h2> 
 
    <p>Hello World</p> 
 
    </div> 
 

 
    <div class="col col2"> 
 
    <h2>Column 2</h2> 
 
    <p>Hello World!</p> 
 
    </div> 
 

 
    <div class="col col3"> 
 
    <h2>Column 3</h2> 
 
    <p>Some other text.. Some other text.. Some other text.. Some other text..</p> 
 
    </div> 
 
</div> 
 

 
<div class="col-container w"> 
 
    <div class="col col1"> 
 
    <h2>Column 1</h2> 
 
    <p>Hello World</p> 
 
    </div> 
 

 
    <div class="col col2"> 
 
    <h2>Column 2</h2> 
 
    <p>Hello World!</p> 
 
    </div> 
 

 
    <div class="col col3"> 
 
    <h2>Column 3</h2> 
 
    <p>Some other text.. Some other text.. Some other text.. v Some other text..</p> 
 
    </div> 
 
</div>