css相同的寬度和高度的列

-2

要求設置相等的高度和等寬度的列。我已經使用css屬性顯示錶格單元格，它的工作很好，但高度相當，但在寬度相同的情況下效果不佳。我知道技術上它工作正常，但我想使它的寬度相等。因此，無論是在一張表中有四列還是一列，它應該有一個寬度。css相同的寬度和高度的列

我也看過flex，但它的支持不在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>

來源

2016-04-26 Carlos

你知道總共有多少個div嗎？ – Bojan

我不認爲這是一個重複的問題。 – Carlos

你的小提琴究竟有什麼問題？ –

您可以指定寬度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具有更精確的計算。

來源

2016-04-26 18:28:56

它可以在IE 9和手機瀏覽器中使用嗎？ – Carlos

爲什麼百分比寬度不起作用？ – Carlos

如果（i）表具有寬度（ii）列寬度總和等於100％，則百分比寬度將工作。對於兩列，這將是50％，瀏覽器會回到自己的計算。 –

爲了使它工作，你需要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>

來源

2016-04-26 19:55:30

css相同的寬度和高度的列

回答

相關問題