Gleiche Breite und Höhe Spalte von css

Question

Die Anforderung ist, gleiche Höhe und gleiche Breite der Spalte festzulegen. Ich habe CSS-Eigenschaft Display-Tabelle-Zelle für diese verwendet und es funktioniert gut in Bezug auf die gleiche Höhe, aber nicht gut mit, wenn es um gleiche Breite kommt. Ich weiß technisch, dass es gut funktioniert, aber ich möchte es gleich breit machen. Also, ob es vier Spalten oder eine Spalte in einer Tabelle gibt, sollte es mit einer Breite kommen.

Ich habe auch nach flex gesucht, aber seine Unterstützung ist nicht in IE9 und hat einige Kompatibilitätsprobleme mit mobilen Browsern. Ich habe nachgedacht und es auf viele Arten versucht, aber ich habe keine Lösung gefunden. Hier ist fiddle, wenn Sie Ihre Hand darauf versuchen wollen.

HTML

.table { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 0 10px; 
 
    width: 23.8%; 
 
    height: 100% 
 
} 
 
.white-box { 
 
    border: solid 1px #ccc; 
 
    background: #eee; 
 
    height: 100% 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="table"> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
</div>

Answer 1

Sie können die Breite usine vw Einheiten angeben. Diese Einheit hat jedoch einige Macken. Zum Beispiel enthält es Bildlaufleisten und Rand/Padding auf Körper.

Wenn Sie also auf 25% der verfügbaren Breite ausgerichtet sind, müssen Sie etwas wie calc(100vu - 17px - 20px)/4 tun.

.table { 
 
    display: table; 
 
    height: 100%; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 0 .5vw; 
 
    width: 22vw; 
 
    height: 100%; 
 
} 
 
.white-box { 
 
    border: solid 1px #ccc; 
 
    background: #eee; 
 
    height: 100%; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="table"> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="white-box">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    </div> 
 
</div>

Here is a fiddle mit genaueren Berechnungen.

Answer 2

Damit es funktioniert, benötigen Sie 3 Ebenen: Tabelle - Tabelle - Zeile - Tabelle - Zelle.

<div class="table"> 
    <div><!-- style="display:table-row" assumed --> 
     <div class="cell"> 
      <div class="white-box>.....</div> 
     </div> 
     <div class="cell"> 
      <div class="white-box>.....</div> 
     </div> 
    </div> 
    <!-- repeat rows --> 
</div>