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

Question

Given the design below where the green bits are white space that can resize and the mountains are fixed size images that can not change size. How can I code this so that it will responsively resize (no javascript).

The initial widths of both the white space and the images are all different.

The green spaces need to scale down proportionally so that when one green space is 50% of its origional width all green spaces are 50% of their origional width.

Not use a flexbox. Needs further back compatability.

This is what it would look like after half the green space has gone.

Answer 1

Consider giving each image its own % -based margin-right after declaring its width :

 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> 

---

NB I was initially going to suggest using CSS viewport width units ( vw ) rather than % .

But I see MDN states:

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).

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