响应 - 一排图像，一些有边框

Question

我正在努力弄清楚如何最好地在这个页面上分别制作2行4张图像。

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

现在我已将行中的每个DIV设置为宽度：24％。如果不是因为我需要让边框出现在每个其他图像上，这样可以正常工作。

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

<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为全宽。