html - 响应式——一排图片，有些有边框

Question

我正在尝试弄清楚如何最好地使此页面上的 2 行 4 张图像响应式地工作。

http://www.ashtonbrewingcompany.com/index-real.html

现在我已将行中的每个 DIV 设置为宽度:24%。如果不是因为我需要在所有其他图像上显示边框，这会很好用。

现在，当视口(viewport)变小时，带边框图像右侧的图像最终会与边框重叠。

<div class="instagram-container">
		<div class="insta-content">
		<div class="row01 inrow">
			<div><span><img src="_img/insta-01.png" /></span></div>
			<div><span class="frame-01"><img src="_img/insta-02.png" /></span></div>
			<div><span><img src="_img/insta-03.png" /></span></div>
			<div><span class="frame-02"><img src="_img/insta-04.png" /></span></div>
		</div>
		<div style="clear:both;"></div>
		<div class="row02 inrow">
			<div class="frame-03"><img src="_img/insta-05.png" /></div>
			<div><img src="_img/insta-06.png" /></div>
			<div class="frame-04"><img src="_img/insta-07.png" /></div>
			<div><img src="_img/insta-08.png" /></div>
		</div>
		<div style="clear:both;"></div>
		</div>
	</div>
	</div>

.instagram-container {
	padding: 120px 20px 60px 20px;
	width: 99%;
	margin: 0 auto;
}
.insta-content {
	text-align: center;
}

.row01 div {
	display: inline-block;
	width: 24%;
}
.row01 div span {
	display: inline-block;
}

Answer 1

它们重叠是因为您正在使用 display:inline-block。如果您使用 display:block; 和 float: left 那么重叠就会消失(尽管您可能需要调整一些其他间距)。通常，您会在移动断点处删除 float，这样每个 div 都是全宽的。