如何响应性地缩小行中元素之间的空白区域

Question

鉴于下面的设计，绿色位是可以调整大小的白色空间，山是固定大小的图像，不能改变大小。我如何编码，以便响应调整大小（没有javascript）。

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

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

不使用flexbox。需要进一步提高兼容性。

这是绿色空间的一半消失后的样子。

Answer 1

在声明%后，请考虑为每个图片提供自己的基于margin-right的{​​{1}}：

＆＃13;

＆＃13;

width

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

N.B。我最初建议使用CSS视口宽度单位（<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>）而不是vw。

但我看到MDN声明：

  

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

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