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

红色框是图像的占位符，将是真实图像标记。

我很难让图像合理化，以便外部图像触及页面边缘并且图像之间的距离相等。

当我按照this tutorial中的建议添加空间隙元素时，当页面为全宽时，它不再跨越页面的宽度。间隙元素占据了空间。在较小的屏幕尺寸下，顶行图像之间的空间与底行的空间不同。

图像的宽度始终相同 - 它们之间的间距应根据屏幕大小而变化。

当底行中有不等数量的图像时，它应该是左对齐。

Here is an example of what I'm trying to achieve.

Answer 1

您可以使用text-align justify

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-between和space-around有几种选择。

Fiddle

.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

的更新示例

图像网格 - 不同的高度

3 个答案: