Question

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

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

我通常会谷歌这个，但这让我非常沮丧，以至于我甚至无法想到要谷歌的内容。

Answer 1

Flexbox非常适合简化这类工作。 Here is a great resource for flexbox to learn from.

在这里，我给了父母＆＃34; display：flex＆＃34;让孩子们弹性元素。我让孩子们宽了32％（留下1％的差距）。我已将父级设置为＆＃34; justify-content：space-between＆＃34;告诉flex元素在每个项目之间留出空间。

在移动设备上我给了父母＆＃34; flex-wrap：wrap＆＃34;因此，如果它们太宽，它们将下降到下一行，并且孩子的宽度为100％，因此它们会跨越设备的整个宽度。

此外，为了使背景图像与流体盒一起正常工作，我已经给出了它们＆＃34;背景尺寸：包含＆＃34;和＆＃34;背景位置：中心中心＆＃34;。理想情况下，最好为它们使用实际的图像标记。

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

＆＃13;

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

＆＃13;

Answer 2

完成此任务有两个步骤： 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计算childelements并根据子项数量创建完全动态的样式。

不能使三个div与背景图像响应

2 个答案: