Question

我现在已经尝试了几个小时来解决我的代码中的问题。

如果浏览器的窗口大小发生变化，则黑色边框与灰色边框不匹配，但应该如此。如果灰色边框现在整体可见，则它应该跳到下一行。

知道如何解决这个问题吗？

.ul_images {
	text-align: center;
	width: 100%;
	padding-left: 0;
}

.li_image{
	display: inline-block;
}

.a_image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 250px;
	width: 250px;
	border: 4px solid #000;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-align: left;
	margin: 10px 10px;
}

.a_image_span {
	position: absolute;
	width: 100%;
	text-align: center;
	word-wrap: break-word;
	margin-top: 20px;
	color: #E6E6E6;
}

.li_image_background {
	opacity: .3;
	filter: Alpha(opacity=30);
	position: absolute;
}

<!DOCTYPE HTML>

<head>
	<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>

<body>
	<ul class="ul_images">
		<li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li>
		<li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li>
		
		<li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li>
		<li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li>
		
		<li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li>
		<li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li>
		
		<li class="li_image li_image_background"><a class="a_image" style="background-image: url('background.jpg');" href="#"></a></li>
		<li class="li_image"><a class="a_image a_image_backgroundsize" style="background-image: url('overlay.png');" href="#"><span class="a_image_span">text here</span></a></li>
	</ul>
</body>

Answer 1

根据您的要求，我已将第一个灰盒放在黑盒子上。请找到相同的小提琴链接 <ul class="ul_images"> /* Your Code */ ..</ul> JSFIDDLE

HTML / CSS如何纠正重叠两个列表元素？

1 个答案: