cssで同じ幅と高さの列

Question

同じ高さと等しい幅の列を設定する必要があります。私はこれと同じ高さの面ではうまく動作しますが、同じ幅になるとうまくいかない場合は、CSSのプロパティ表示の表セルを使用しています。私は技術的にはうまくいきますが、同じ幅にしたいと思っています。したがって、1つのテーブルに4つの列または1つの列があるかどうかは、1つの幅が必要です。

私もフレックスを探しましたが、IE9にはそのサポートはなく、モバイルブラウザとの互換性に問題があります。私は考えて、それを多くの方法を試みたが、解決策を得ていない。あなたが手を入れたい場合はfiddleです。

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

あなたは幅usine vw単位を指定することができます。しかし、このユニットにはいくつかの欠点があります。例えば、スクロールバーとボディのマージン/パディングが含まれています。

したがって、利用可能な幅の25％をターゲットにしている場合は、calc(100vu - 17px - 20px)/4のようなものを行う必要があります。より正確な計算と

.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。

Answer 2

3つのレベルが必要です。table-table-row-table-cell。

<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>