如何响应式缩小连续元素之间的空白答案

【问题标题】：How do I responsively shrink white space between elements in a row如何响应式缩小连续元素之间的空白
【发布时间】：2016-11-14 16:21:40
【问题描述】：

在下面的设计中，绿色位是可以调整大小的空白区域，而山脉是固定大小的图像，不能改变大小。我该如何编码，以便它能够响应地调整大小（无 javascript）。

空白和图像的初始宽度都不同。

绿色空间需要按比例缩小，以便当一个绿色空间是其原始宽度的 50% 时，所有绿色空间都是其原始宽度的 50%。

不使用弹性框。需要进一步向后兼容。

这就是一半绿地消失后的样子。

【问题讨论】：

考虑在图像上使用基于 % 的边距，但 flex 确实是最好的选择。
请向我们展示您的代码。
我可以想到几种方法，但没有看到您的标记。我不知道哪个最适合您的情况。
@MoshFeu 我还没有任何标记。我不确定最好的方法是什么。
@Rounin 的回答对你有好处吗？

标签： html css

【解决方案1】：

考虑在声明其width 后为每个图像赋予其自己的%-based margin-right：

div {
white-space:nowrap;
}

img {
height: 120px;
}

img:nth-of-type(1) {
width: 126px;
margin-left:3%;
margin-right:2%;
}

img:nth-of-type(2) {
width: 168px;
margin-right:1%;
}

img:nth-of-type(3) {
width: 84px;
margin-right:6%;
}

img:nth-of-type(4) {
width: 28px;
margin-right:3%;
}

img:nth-of-type(5) {
width: 42px;
margin-right:2%;
}

<div>
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
</div>

注意我最初建议使用 CSS 视口宽度单位 (vw) 而不是 %。

但我看到 MDN 声明：

只有基于 Gecko 的浏览器会更新视口值动态地，当视口的大小被修改时（通过修改台式计算机上的窗口大小或通过转动设备在手机或平板电脑上）。

见：http://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths

【讨论】：

几乎可以工作。但是，在间隙完全闭合之前，项目会中断到下一行。
是的。很容易固定。您可以通过将元素包含在 div 中并为该 div 声明样式 white-space: nowrap 来防止包装。请参阅我对上述解决方案的修改。