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

Question

我有三个包含背景图像 (background-image: url()) 的 div，但我在使它们具有响应性（使用引导程序）和在它们之间放置间距时遇到了问题。我尝试了一些类似 width: 100% 和 margin: 0 auto 但添加边距属性有点删除边距，如果使用边距，图像之间会失去间距，而填充当然不起作用。另外由于某种原因，我无法将宽度添加到图像的高度。

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

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

Answer 1

有两个步骤可以做到这一点： 1. 将你的父 div 样式更改为：

#my-projects-section {
    background-color: black;
    height: 500px;
    width:100%;
}

2。将此添加到您的子样式中：

#image-one,
#image-two,
#image-three {
    width: 30%;
    margin: 1.66%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    transition: .2s ease-out, .2s ease-in;
}

http://codepen.io/westefan/pen/Lkoooq

目前这是静态定义的，如果您想将新项目添加到该部分，则必须修改 CSS。也有计算边距的选项，但尚不支持：https://developer.mozilla.org/en/docs/Web/CSS/calc 另一种选择是使用 Javascript 来计算子元素并根据子元素的数量创建完全动态的样式。

Answer 2

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

这里我给了父级“display: flex”来让子级伸缩元素。我让孩子们宽了 32%（留下 1% 的差距）。我已将父级设置为“justify-content: space-between”，以告诉 flex 元素在每个项目之间留出空间。

在移动设备上，我为父级指定了“flex-wrap: wrap”，因此如果它们太宽，它们将下降到下一行，而子级则为 100% 宽度，因此它们跨越设备的整个宽度。

此外，为了让背景图像与流体框一起正常工作，我给了它们“背景尺寸：包含”和“背景位置：中心中心”。理想情况下，最好为它们使用实际的图像标签。

请注意，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;
   }
 }