圖像網格-不同高度

Question

我正在為一個響應式網格布局，該布局的圖標具有相同的寬度但不同的高度。

這是JS Fiddle中的模型：

https://jsfiddle.net/amykirst/htqxttan/3/

HTML：

<div class="expertise">
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 60px"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 50px"></div>
        <p>Label</p>
    </div>
    <div class="icon-wrapper">
        <div class="img" style="height: 70px"></div>
        <p>Label</p>
    </div>
</div>

CSS：

* {
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

.icon-wrapper .img {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  background-color: red;
}


.icon-wrapper p {
  text-align: center;
}

.expertise {
text-align: justify;
}

.expertise:after {
  content: " ";
  display: inline-block;
  width: 100%;
}

.icon-wrapper {
    margin: 0 auto;
    background-color: blue;
    display: inline-block;
     vertical-align: bottom;
  margin-top: 1rem;
}

紅色框是圖像的占位符，將是真實物體中的圖像標簽。

我很難使圖像合理，以使外部圖像觸及頁面邊緣，並且圖像之間的距離相等。

當我按照本教程的建議添加空白元素時，當頁面為全角時，它將不再覆蓋頁面的寬度。 間隙元素在那里占據空間。 在某些較小的屏幕尺寸下，頂行圖像之間的間隔與底行間隔不同。

圖像的寬度將始終相同-它們之間的間距應根據屏幕尺寸而變化。

當底行中的圖像數量不相等時，應左對齊。

這是我要實現的示例。

Answer 1

您可以使用文本對齊對齊

body {
  padding: 0;
  margin: 0;
  text-align: justify;
}

https://jsfiddle.net/htqxttan/8/

Answer 2

這似乎是使用flexbox布局的理想情況。 檢查代碼段中的評論，讓我知道這是否是您的意思。

.expertise { justify-content: xxx } ，flex-start，flex-end，center，space-space和space-around有幾種選擇。

小提琴

 .expertise { display: flex; /* make element a flexible layout container */ flex-wrap: wrap; /* a row of N columns, wrapping within frame*/ justify-content: space-between; /* evenly space elements, outer to the edges */ align-items: flex-end; /* bottom align elements */ background-color: silver; } .icon-wrapper { background-color: blue; max-width: 100%; /* don't make this too small, leave as is or make it a multiple of min-width */ max-height: 100%; /* ditto */ min-height: auto; /* override if you want to set minimum; interacts with flex-basis! */ overflow: hidden; /* Chop off outside content */ margin: 8px /* some space between the boxes (when not using auto spacing) */ } .icon-wrapper p { text-align: center; } .icon-wrapper .img { display: block; /* default inline, block removes bottom space */ width: 4rem; height: 4rem; background-color: red; } 

 <div class="expertise"> <div class="icon-wrapper"> <div class="img"></div> <p>Label</p> </div> <div class="icon-wrapper"> <div class="img" style="height: 60px"></div> <p>Label</p> </div> <div class="icon-wrapper"> <div class="img"></div> <p>Label</p> </div> <div class="icon-wrapper"> <div class="img"></div> <p>Label</p> </div> <div class="icon-wrapper"> <div class="img"></div> <p>Label</p> </div> <div class="icon-wrapper"> <div class="img" style="height: 50px"></div> <p>Label</p> </div> <div class="icon-wrapper"> <div class="img" style="height: 70px"></div> <p>Label</p> </div> </div> 

Answer 3

這是您的樣式更新，可幫助您完成工作：

.expertise {
    text-align:justify;
    text-justify:newspaper;
    text-align-last:justify;
}

另外，您可以設置：

.expertise {
    font-size:0;
}

和：

.icon-wrapper {
    font-size: YOURFONTSIZE;
}

消除布局上的任何額外差距。 這是JSfiddle的更新示例