How to force div to fill empty space on left side of another, higher div [duplicate]

问题

Please look at the example below. I'm trying to put my yellow div under red div and on the left side of bottom half of green. If i use clear: left it will jump down, but it lefts empty space above. I want it to fill this space.

Here's example: https://jsfiddle.net/enqqr2w8/

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

Does this work for you?

EDIT: I have found a way to make dynamic columns with only 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>

Sources: 1, 2, 3, 4

来源：https://stackoverflow.com/questions/39318957/how-to-force-div-to-fill-empty-space-on-left-side-of-another-higher-div

标签

html

css

positioning

floating