使用 flex 對齊 5 個盒子會導致間距問題

Question

我一直在使用網格布局，它在所有瀏覽器中都可以正常工作，除了 IE IE11 中的網格布局問題

現在我一直在嘗試使用 flex 3 cols * 2 rows 的相同結構，但由於最后 2 個盒子的空間，它並沒有達到預期的效果。

希望您能在 IE11 中的網格問題問題中向我提出您的建議

或使用 flex

 .grid_container{ margin: 10px auto; max-width: 1100px; width: 100%; height: auto; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; flex-direction: row; justify-content: space-around; flex-flow: wrap; }.box-item { width: 30%; height: auto; position: relative; }.box-item img { max-width: 100%; max-height: 100%; vertical-align: bottom; min-height: 200px; }.box-text { position: absolute; bottom: 12px; left: 0; right: 0; width: 100%; text-align: center; font-size: 1.3rem; font-weight: 400; color: white; } @media only screen and (max-width: 1200px) {.box-item { width: 45%; } } @media only screen and (max-width: 1200px) {.box-item { width: 90%; } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width: 320px) { } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-width: 320px) and (max-width: 479px) { } @media only screen and (max-width: 767px) { } /* Tablets potrait----------- */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Tablets (portrait and landscape) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) { } @media only screen and (min-width: 768px) and (max-width: 991px) { } /*--------@media only screen and (min-width: 992px){ } ----------- */ /* Desktops and laptops ----------- */ @media only screen and (min-width: 1224px) { } /* Desktops and laptops ----------- */ @media only screen and (min-width: 1400px) { }

 <div class="grid_container"> <div class="box-item"> <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" /> <div class="box-text"> dummy text </div> </div> <div class="box-item"> <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" /> <div class="box-text"> dummy text </div> </div> <div class="box-item"> <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" /> <div class="box-text"> dummy text </div> </div> <div class="box-item"> <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" /> <div class="box-text"> dummy text </div> </div> <div class="box-item"> <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" /> <div class="box-text"> dummy text </div> </div> </div>

Answer 1

您可以將此添加到模擬 IE 的柔性顯示的 css 中：

_:-ms-lang(x),
      .ie10up {
        /* IE10+ CSS styles go here */
        .grid_container {
          margin: 10px auto;
          max-width: 1100px;
          width: 100%;
          height: auto;
          display: inline-table;
        }
        .box-item {
          position: relative;
          display: inline;
          text-align: center;
        }
      }

Answer 2

將以下代碼添加到您現有的代碼中。 請更新寬度以占總寬度的 1/3。 還要添加 max-width 使其不超過該寬度。

.box-item {
    width: 33%;
    max-width: 33%; 
}