html - 如何响应式地缩小行中元素之间的空白

Question

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

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

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

不使用 flex 盒。需要进一步向后兼容。

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

Answer 1

在声明其宽度后，考虑为每个图像赋予其自己的基于%的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 视口(viewport)宽度单位 (vw) 而不是 %。

但我看到 MDN 状态:

Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).

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