Question

我正在开发一个网站，它是屏幕尺寸为8的一系列正方形。我使用了calc，以及12.5％的回退百分比。第8个宽度导致块尝试填充部分像素宽度，当然它是圆形并且会破坏我的网格。下面是我用来制作网站的代码（HTML的一部分），4个图像以应有的方式显示它，打破它应该是的方式，然后再打破。向左浮动用于消除随附的固有余量。在这些破碎的屏幕尺寸下，我可以使用1px的背景线，但我希望网格保持原状。我该怎么做才能防止这种情况发生？

.navblock {
	width: 12.5vw; /**fallback**/
	width: calc(100%  /8);
	height: 12.5vw; /**fallback**/
	height: calc(100%  /8);
	display: inline-block;
	color: #ffffff;
	text-align: center;
	float: left;
}
.homethumb img {
	width: 12.5%; /**fallback**/
	width: calc(100%  /8);
	display: inline-block;
	float: left;
}

<a href="files/images/portfolio/full_size/48_full.png" data-lightbox="localfmjune2nd" data-title="LocalFM 06/02/2017"><img src="files/images/portfolio/thumb/48_thumb.png" title="LocalFM 06/02/2017" alt="LocalFM Poster"/></a>
		<a href="files/images/portfolio/full_size/47_full.png" data-lightbox="front2017" data-title="Shout! Graphics Buisness Card (Front) 2017"><img src="files/images/portfolio/thumb/47_thumb.png" title="Shout! Graphics Buisness Card (Front) 2017" alt="Buisness Card (Front) 2017"/></a>
		<a href="files/images/portfolio/full_size/46_full.png" data-lightbox="back2017" data-title="Shout! Graphics Buisness Card (Back) 2017"><img src="files/images/portfolio/thumb/46_thumb.png" title="Shout! Graphics Buisness Card (Back) 2017" alt="Buisness Card (Back) 2017"/></a>
		<a href="files/images/portfolio/full_size/45_full.png" data-lightbox="maldefposter" data-title="MALDEF Support Poster Concept"><img src="files/images/portfolio/thumb/45_thumb.png" title="MALDEF Support Poster Concept" alt="MALDEF Support Poster"/></a>
		<div class="navblock"> 
			<h2><a href="about.html"><br>ABOUT<br>ME</a></h2>
		</div>
		<a href="files/images/portfolio/full_size/44_full.png" data-lightbox="fluxsep5th" data-title="Flux Capacitor 09/05/2016"><img src="files/images/portfolio/thumb/44_thumb.png" title="Flux Capacitor 09/05/2016" alt="Flux Capacitor Poster 09/05/2016"/></a>
		<a href="files/images/portfolio/full_size/43_full.gif" data-lightbox="fluxsep27th" data-title="Flux Capacitor 09/27/2016"><img src="files/images/portfolio/thumb/43_thumb.gif" title="Flux Capacitor 09/27/2016" alt="Flux Capacitor Poster 09/27/2016"/></a>
		<a href="files/images/portfolio/full_size/42_full.png" data-lightbox="fluxsep9th" data-title="Flux Capacitor 09/09/2016"><img src="files/images/portfolio/thumb/42_thumb.png" title="Flux Capacitor 09/09/2016" alt="Flux Capacitor Poster 09/09/2016"/></a>
		<a href="files/images/portfolio/full_size/41_full.png" data-lightbox="julyfreeflier" data-title="July Free Flier Offer 2016"><img src="files/images/portfolio/thumb/41_thumb.png" title="July Free Flier Offer 2016" alt="July Free Flier Poster Offer 2016"/></a>
		<div class="navblock"> 
			<h2><a href="files/images/portfolio/full_size/46_full.png" data-lightbox="back2017" data-title="Shout! Graphics Buisness Card (Back) 2017"><br>CONTACT<br>ME</a></h2>
		</div>

网站打破部分像素宽度

0 个答案: