本文使用響應(yīng)式圖像庫探討了掌握響應(yīng)網(wǎng)格布局中列之間間距的技術(shù)。

>>要進(jìn)一步了解響應(yīng)式布局，請(qǐng)查看我們的屏幕截圖：在Flexbox中創(chuàng)建多列布局。

鑰匙要點(diǎn)：

• 可以通過精確控制柱間間距來實(shí)現(xiàn)自定義響應(yīng)的布局，如響應(yīng)式圖像庫所證明的那樣。
• display: inline-block方法創(chuàng)建響應(yīng)式圖像庫；將父字體的大小設(shè)置為零，刪除了默認(rèn)的內(nèi)聯(lián)窗口間距。
>
• Flexbox有效地解決了常見的布局問題，在所有屏幕尺寸上創(chuàng)建了相等的高度列，從而簡(jiǎn)化了響應(yīng)式圖像網(wǎng)格中的柱間間距控制。
>媒體查詢和CSS網(wǎng)格布局啟用響應(yīng)式圖像網(wǎng)格，根據(jù)設(shè)備特征（屏幕尺寸）應(yīng)用不同的CSS規(guī)則。

構(gòu)建一個(gè)響應(yīng)式布局：>

在較大的屏幕上，畫廊類似于以下內(nèi)容：

>

在較小的屏幕上：

簡(jiǎn)單標(biāo)記：

<div>
  <a href="http://m.miracleart.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

幾種布局方法實(shí)現(xiàn)了這一目標(biāo)。 在探索兩個(gè)之前，讓我們重申要求：

在中屏和較小的屏幕上的兩列布局。
8px柱間間距。

使用：inline-block

方法構(gòu)建畫廊。 考慮一下此CSS：display: inline-block

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

>說明：

通過將父字體大小設(shè)置為零來覆蓋

默認(rèn)的內(nèi)聯(lián)塊間距。 子元素字體大小可能需要重置（不在此）。

>

小屏幕具有兩個(gè)列布局，帶有8px間距。 列寬度計(jì)算：

>每行的總列空間：1 * 8px = 8px（8px，而不是16px，因?yàn)閺拿總€(gè)第二列中刪除了右邊緣）。
• >
列寬度：
• （4px = 8px / 2）。calc(50% - 4px)

大屏幕具有四列布局，帶有8px間距。列寬度計(jì)算：

>每排總列空間：3 * 8px = 24px（24px，而不是32px，因?yàn)閺拿總€(gè)第四列中刪除了右邊緣）。
• 列寬：
（6px = 24px / 4）。
• > calc(25% - 6px)

請(qǐng)參閱

方法的Codepen演示。

>

使用flexbox：

inline-block解決方案具有缺點(diǎn)。 添加標(biāo)題演示一個(gè)：

更新的標(biāo)記：

<div>
  <a href="http://m.miracleart.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

>帶有標(biāo)題的大屏幕庫：

通過Flexbox解決

不相等的高度。 更新父元素的CSS：

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

結(jié)果是在所有屏幕上相等的高度列。大屏幕示例：

>使用帶有改進(jìn)字幕的Flexbox請(qǐng)參閱Codepen演示。

> Flexbox的

屬性并未直接創(chuàng)建此布局。 justify-content>和space-between在最后一行導(dǎo)致尷尬的分布。 CSS：space-around

<div>
  <a href="http://m.miracleart.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
    <figcaption>Some text here</figcaption>
  </a>
  <!-- ...more images... -->
</div>

>否

需要； margin-right處理項(xiàng)目分布。justify-content

>使用

屬性參見Codepen演示。justify-content

結(jié)論： >本文詳細(xì)介紹了用于控制響應(yīng)圖像網(wǎng)格中柱間間距的技術(shù)。

就足夠了，flexbox更容易，更方便，尤其是

>。 inline-blockcalc()在我們的屏幕截圖中了解有關(guān)Flexbox布局的更多信息：在Flexbox中創(chuàng)建多列布局。

> >（為簡(jiǎn)潔而省略了FAQ部分，因?yàn)檫@是對(duì)常見響應(yīng)式設(shè)計(jì)問題的重復(fù)。）

以上是使用現(xiàn)代CSS構(gòu)建響應(yīng)式圖像網(wǎng)格的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！