Question

我正在尝试使用各种大小的div元素平铺网页。但是，我遇到了一个问题，一旦x个div元素填充了屏幕宽度，以下div位于前一行＆＃39;下面。而不是浮动以适应前一行中元素之间的空间。下面的代码更能说明我的意思;我喜欢这个游戏＆＃39; div要浮动以适应当前所在位置的空间。

＆＃13;

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;
}

＆＃13;

		<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>

＆＃13;

Answer 1

我担心你想要做的事实上是重新订购你的divs来创建一个空间填充的布局。据我所知，仅使用CSS就很困难，如果不是完全不可能的话。

我建议你看一下this SO post，或者甚至the Bulma framework就是你想要的。

但是，如果你不再自动重新订购容器，而是寻求一种解决方案，弹性地调整每个容器的宽度以填充可用空间，同时保持其“顺序”（第一，第二，第三），我相信CSS将是一个可行的解决方案。如果您需要帮助，请使用搜索或重新询问。

Answer 2

为div类或id创建一个样式，如

.className    
{display:inline;}

并在每个div中使用它希望这会对你有所帮助

这方面的一个例子 http://jsfiddle.net/JDERf/

重新定位另一个div而不是下面的div

2 个答案: