如何强制div填充另一个更高div左侧的空白空间[重复]答案

【问题标题】：How to force div to fill empty space on left side of another, higher div [duplicate]如何强制div填充另一个更高div左侧的空白空间[重复]
【发布时间】：2016-09-04 16:14:39
【问题描述】：

请看下面的例子。我试图将我的yellow div 放在red div 下和green 下半部分的左侧。如果我使用clear: left 它会跳下来，但它会在上面留下空白空间。我想让它填满这个空间。

这是一个例子： https://jsfiddle.net/enqqr2w8/

【问题讨论】：

您能使用table 安排吗？

标签： html css positioning floating

【解决方案1】：

#redyellow
{
	width: 100px;
	height: 200px;
	float: left;
}
#red
{
	width: 100px;
	height: 100px;
	background-color: red;
	float: left;
}
#green
{
	width: 100px;
	height: 200px;
	background-color: green;
	float: left;
}
#blue
{
	width: 100px;
	height: 100px;
	background-color: blue;
	float: left;
}
#yellow
{
	width: 100px;
	height: 100px;
	background-color: yellow;
	float: left;
}
body
{
	width: 300px;
}

<body>
  <div id="redyellow">
  <div id="red">
	aa
	</div>
  <div id="yellow">
	aa
	</div>
  </div>
	<div id="green">
	aa
	</div>
	<div id="blue">
	aa
	</div>
</body>

这对你有用吗？

编辑：我找到了一种仅使用 CSS3 制作动态列的方法：

div
{
  width: 100px;
  height: 100px;
  break-inside: avoid-column;
}
#red {
	background-color: red;
}
#green
{
	height: 200px;
	background-color: green;
}
#blue
{
	background-color: blue;
}
#yellow
{
	background-color: yellow;
}
#orange
{
	background-color: orange;
}
#black
{
	background-color: black;
}
body
{
  width: 300px;
  columns: 3;
}

<body>
	<div id="red"></div>
    <div id="yellow"></div>
	<div id="green"></div>
	<div id="blue"></div>
    <div id="orange"></div>
</body>

来源：1、2、3、4

【讨论】：

感谢您的快速回复。不幸的是我不能那样做。我实际上用 php 循环打印这个 div（不能使用 ajax 或 jquery 插件，如 Masonry），所以我不能像你的那样做“列”。它就像黄色的 div 按顺序排列为 4，而第 5 个必须在蓝色的下面。
@Arthi 你在说什么？这不使用 jQuery 或 AJAX，只使用一个额外的元素和 CSS 定义。
@Arthi 好的，我明白你在说什么，我会试着想点别的。
@Arthi 现在看起来怎么样？我添加了一个额外的橙色块来显示它的外观。