Question

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

这对你有用吗？

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

＆＃13;

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

＆＃13;

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

＆＃13;

来源：1，2，3，4

如何强制div填充另一个更高的div左侧的空白区域

1 个答案: