我目前正在使用display: flex;顯示 3 個圖塊，這些圖塊會根據其中包含最多內容的圖塊進行調整并保持相同的高度。
下面的 HTML/CSS 適用于除 IE11 之外的所有瀏覽器，我不知道為什么。
我嘗試添加min-height: 100vh;到我的richTextOne課程中，但這會使所有容器的高度保持不變，并且還會增加高度，所以這不是我想要的。
min-height: inherit;對我的richTextOne班級來說，使容器并非都具有相同的高度。每個 tile div 的高度取決于其中的內容量。
任何幫助都將不勝感激。
謝謝！
.flex-box {
width: 100%;
min-height: 345px;
display: flex;
flex-direction: row;
}
.tile {
display: flex;
flex-direction: column;
width: 348px;
padding-bottom: 0px;
margin-left: 1px;
margin-right: 61px;
}
.richTextOne {
flex: 1 auto;
padding-top: 35px;
padding-left: 24px;
padding-right: 11px;
}<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
<!--/* Tile 1 */-->
<div class=“tile”>
<div class="richTextOne">
<p>blah blah blah</p>
</div>
</div>
<!--/* Tile 2 */-->
<div class=“tile”>
<div class="richTextOne">
<p>blah</p>
</div>
</div>
<!--/* Tile 3 */-->
<div class=“tile”>
<div class="richTextOne">
<p>blah blah blah blah blah blah blah blah blah</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
IE11 中有大量與 flex 相關的錯誤。
見https://caniuse.com/?search=flex
特別是似乎與您的代碼相關的內容：
在 IE10 和 IE11 中，如果容器具有 min-height 但沒有顯式的 height 屬性，則具有 display: flex 和 flex-direction: column 的容器將無法正確計算其彎曲子項的大小。
uj5u.com熱心網友回復：
我的系統上沒有 internet explorer 11，但我注意到你固定了瓷磚的寬度等，所以如果調整頁面大小，它會不合適。
在下面測驗我的代碼，看看它是否適用于 ie11
<style>
*, *::after, *::before {
box-sizing: border-box;
}
.flex-box {
width: 100%;
min-height: 345px;
display: flex;
flex-direction: row;
}
.tile {
display: inline-block;
width: 33%;
padding-bottom: 0px;
margin-left: 1px;
margin-right: 61px;
background-color: #e2e2e2;
}
.tile:last-child {
margin-right: 0;
}
.richTextOne {
padding: 1rem;
display: block;
}
</style>
<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class="flex-box">
<!--/* Tile 1 */-->
<div class="tile">
<div class="richTextOne">
<p>blah blah blah</p>
</div>
</div>
<!--/* Tile 2 */-->
<div class="tile">
<div class="richTextOne">
<p>blah</p>
</div>
</div>
<!--/* Tile 3 */-->
<div class="tile">
<div class="richTextOne">
<p>blah blah blah blah blah blah blah blah blah</p>
</div>
</div>
如果您有任何問題，請隨時提問。
uj5u.com熱心網友回復：
你的意思是IE中的瓷磚不服從min-height: 345px？除此之外，我在 IE 11 中沒有發現其他問題。
如果你的意思是這個min-height問題，你可以參考這個檔案。解決方法是在 周圍添加一個 flex 列包裝器flex-box：
.flex-box {
width: 100%;
min-height: 345px;
display: flex;
flex-direction: row;
}
.tile {
display: flex;
flex-direction: column;
width: 348px;
padding-bottom: 0px;
margin-left: 1px;
margin-right: 61px;
}
.richTextOne {
flex: 1 auto;
padding-top: 35px;
padding-left: 24px;
padding-right: 11px;
}<div style="display: flex; flex-direction: column;">
<div class="flex-box">
<!--/* Tile 1 */-->
<div class="tile">
<div class="richTextOne">
<p>blah blah blah</p>
</div>
</div>
<!--/* Tile 2 */-->
<div class="tile">
<div class="richTextOne">
<p>blah</p>
</div>
</div>
<!--/* Tile 3 */-->
<div class="tile">
<div class="richTextOne">
<p>blah blah blah blah blah blah blah blah blah</p>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
在我的flex-boxdiv 上，我需要添加align-items: stretch;以使子 div 具有相同的高度。謝謝大家！
uj5u.com熱心網友回復：
添加align-items: stretch;到您的彈性父級。
.flex-box {
width: 100%;
min-height: 345px;
height: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
}
.tile {
display: flex;
flex-direction: column;
width: 348px;
padding-bottom: 0px;
margin-left: 1px;
margin-right: 61px;
height: 100%;
}
.richTextOne {
flex: 1 auto;
height: 100%;
padding-top: 35px;
padding-left: 24px;
padding-right: 11px;
}<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
<!--/* Tile 1 */-->
<div class=“tile”>
<div class="richTextOne">
<p>blah blah blah</p>
</div>
</div>
<!--/* Tile 2 */-->
<div class=“tile”>
<div class="richTextOne">
<p>blah</p>
</div>
</div>
<!--/* Tile 3 */-->
<div class=“tile”>
<div class="richTextOne">
<p>blah blah blah blah blah blah blah blah blah</p>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/442424.html
上一篇：在InternetExplorer上運行BlazorWASM只會顯示“正在加載..”而不是有意義的錯誤訊息
下一篇：jq帶單引號bash腳本