html - 无法使具有背景图像的三个 div 响应

Question

我有三个包含背景图像的 div (background-image: url())，但我在使它们具有响应性(使用 Bootstrap )和在它们之间放置间距方面遇到了问题。我尝试了 width: 100% 和 margin: 0 auto 之类的东西，但是添加边距属性有点删除边距，如果使用边距，图像之间会失去间距，而填充当然不起作用。同样出于某种原因，我无法将宽度添加到图像的唯一高度。

http://codepen.io/skullscream-1471533661/full/jAooJB

我通常会用谷歌搜索这个，但这让我很沮丧，我什至想不出要用谷歌搜索什么。

Answer 1

Flexbox 非常适合让这类事情变得简单。 Here is a great resource for flexbox to learn from.

这里我给了父元素“display: flex”来让子元素变得灵活。我已经让 children 宽 32%(留下 1% 的差距)。我已将父级设置为“justify-content: space-between”，以告诉 flex 元素在每个元素之间留出空间。

在移动设备上，我给了父级“flex-wrap: wrap”，这样如果它们太宽，它们就会掉到下一行，而子级则为 100% 宽度，这样它们就会跨越设备的整个宽度。

此外，为了使背景图像能够与流体框一起正常工作，我为它们设置了“background-size: contain”和“background-position: center center”。理想情况下，最好为它们使用实际的图像标签。

请注意，flexbox 还没有完全的浏览器支持 (but it's still pretty good) , 你需要 add vendor prefixes as necessary.

.projects {
  display: flex;
  justify-content: space-between;
}

.projects > div {
  flex: 0 1 32%;
  background-size: contain;
  background-position: center center;
}

@media screen and (max-width: 760px) {
  .projects {
    flex-wrap: wrap;
  }
  .projects > div {
     flex: 0 1 100%;
     margin-bottom: 20px;
   }
 }