CSS图库图像框大小更改

Question

我一直在尝试创建两个列布局图库，但问题是 当我尝试更改图像框大小（图像包含）时，布局转到单列但我希望它是两列。请帮忙。在我的代码片段下面给出。

如果有任何其他方法可以构建此布局，请在下面提及它会很好。

Code Snippet

@import url('https://fonts.googleapis.com/css?family=Pacifico');
.xop-section {
	max-width: 960px;
	margin: 0 auto;
	padding: 6% 2%;

}

.xop-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.xop-grid:after {
	clear: both;
}

.xop-grid:after,
.xop-box:before {
	content: '';
	display: table;
}

.xop-grid li {
	width: 500px;
	height: 300px;
	display: inline-block;
	margin: 20px;
}

.xop-box {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
	border-radius: 10px;
	-webkit-transition: 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
	transition: all 0.3s ease-in-out, transform 0.3s ease-in-out, ;
}

.xop-box:hover {
	transform: scale(1.05);
}

.xop-img-1 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/soap.jpg);
}

.xop-img-2 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/soap.jpg);
}

.xop-img-3 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/flower.jpg);
}

.xop-img-4 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/feather.jpg);
}

.xop-img-5 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/feather.jpg);
}

.xop-img-6 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/feather.jpg);
}

.xop-info {
	position: absolute;
	width: inherit;
	height: inherit;
}

.xop-info h3 {
	font-family: 'Pacifico', cursive;
	font-weight: 400;
	color: #fff;
	font-size: 42px;
	margin: 0 30px;
	padding: 100px 0 0 0;
	line-height: 1.5;
}

.xop-info p {
	font-family: 'Source Sans Pro', sans-serif;
	color: #fff;
	padding: 4px 5px;
	margin: 0 30px;
	font-size: 14px;
	line-height: 2;
}

<div class="xop-section">
		<ul class="xop-grid">
			<li>
				<div class="xop-box xop-img-1">
					<a href="#">
						<div class="xop-info">
							<h3>Paint</h3>
							<p>Nulla commodo iaculis vulputate. Nullam enim mauris, dignissim id est nec, mollis pretium nulla.</p>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="xop-box xop-img-2">
					<a href="#">
						<div class="xop-info">
							<h3>Soap</h3>
							<p>Nulla commodo iaculis vulputate. Nullam enim mauris, dignissim id est nec, mollis pretium nulla.</p>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="xop-box xop-img-3">
					<a href="#">
						<div class="xop-info">
							<h3>Flowers</h3>
							<p>Nulla commodo iaculis vulputate. Nullam enim mauris, dignissim id est nec, mollis pretium nulla.</p>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="xop-box xop-img-4">
					<a href="#">
						<div class="xop-info">
							<h3>Feathers</h3>
							<p>Nulla commodo iaculis vulputate. Nullam enim mauris, dignissim id est nec, mollis pretium nulla.</p>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="xop-box xop-img-5">
					<a href="#">
						<div class="xop-info">
							<h3>Feathers</h3>
							<p>Nulla commodo iaculis vulputate. Nullam enim mauris, dignissim id est nec, mollis pretium nulla.</p>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="xop-box xop-img-6">
					<a href="#">
						<div class="xop-info">
							<h3>Feathers</h3>
							<p>Nulla commodo iaculis vulputate. Nullam enim mauris, dignissim id est nec, mollis pretium nulla.</p>
						</div>
					</a>
				</div>
			</li>
		</ul>
	</div>

Answer 1

你的css： 对于xop-section，你指定了一个 最大宽度：960像素;

然后在 Xop-grid-li：300px;

我能够通过将最大宽度更改为1700px来解决; 我可以改变xop-grid-li值以适应，我不知道这是否是所希望的行为。

顺便说一下，为什么不从你的li标签中取出div标签呢？如果您不需要更改图像：悬停但只需要透明/变暗，您可以在其中放置图像并添加rgba悬停。

https://i.stack.imgur.com/R9W3O.jpg

Answer 2

当我将编码拖入Dreamweaver时，我不得不将.xop-grid li的大小更改为440px并添加一个浮动以便实现所需。我希望这对你有所帮助，也许有更好的解决方案。

.xop-grid li {
    width: 440px;
    height: 300px;
    display: inline-block;
    margin: 20px;
    float:left;
}

Answer 3

在项目中使用flexbox而不是显示＆＃39;阻止＆＃39;属性。它使用帮助您创建具有相同列宽的多列布局。

.xop-grid {
display:flex;
flex-wrap:wrap;
;}