如何强制div填充另一个较高div左侧的空白区域 [英] How to force div to fill empty space on left side of another, higher div
本文介绍了如何强制div填充另一个较高div左侧的空白区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请看下面的例子.我试图将yellow div放在red div下，并放在green下半部分的左侧.如果我使用clear: left，它将跳下，但上面留有空白.我希望它填补这个空间.
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.
这里是示例: https://jsfiddle.net/enqqr2w8/
推荐答案
#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制作动态列的方法:
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>
这篇关于如何强制div填充另一个较高div左侧的空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
