html - 将 div 重新定位在另一个 div 的左侧而不是下方

Question

我正在尝试使用各种大小的 div 元素平铺网页。但是，我遇到了一个问题，一旦 x 个 div 元素填满了屏幕的宽度，下面的 div 就放在了前一个“行”，而不是 float 以适应前一个“行”中元素之间的空间。下面的代码更好地说明了我的意思；我希望“游戏”div float 以适应其当前位置上方的空间。

h1 {
	color: white;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;	
	text-align: center;
}

.container {
	display: inline-block;
}

.default {
	margin: 1em;
	float: left;
}

/* For hover text */
.hover_img {
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
}

.hover_img h4 {
	color: white;
}

.hover_img:hover img {
	opacity: .2;
}

.hover_img:hover .center_text {
	display: block;
}

.center_text {
	position: absolute;
	top: 50%;
	left: 0;
	display: none;
	font-weight: bold;
	text-align: center;
}

img {
	margin: 0;
}

.rectangle-tile-horizontal {
	height: 15em;
	width: 35em;
}

.red {
	background-color: rgba(255, 63, 63, 0.8);
}

#game, #game img {
	width: 30em;
	height: 30em;
}

#app, #app img {
	width: 40em;
	height: 35em;
}

		<div class="container">
			<div class="rectangle-tile-horizontal red center default">
				<h1><b>Projects</b></h1>
			</div>
			
			<div class="rectangle-tile-horizontal hover_img default" id="app">
				<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
				<div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Web App</a></h4></div>
			</div>
			
			<div class="hover_img default" id="game">
				<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
				<div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Breakout</a></h4> </div>
</div>

Answer 1

恐怕您想做的实际上是重新排序您的div 以创建空间填充布局。据我所知，如果不是完全不可能的话，仅使用 CSS 是很困难的。

我建议你看看this SO post ，甚至可能是 the Bulma framework是你想要的。

但是，如果您放弃自动重新排序容器，而是寻求一种 flex 调整每个容器的宽度以填充可用空间同时保持其“顺序”(第一、第二、第三)的解决方案，我确信 CSS 将是一个可行的解决方案。如果您需要帮助，请使用搜索或重新询问。