我有一个例子，我希望最后一个div向上移动，以填满它上面的空间:
null
*{
box-sizing: border-box;
}
.container{
width: 600px;
border: 2px solid red;
height: 100%;
}
.container::after{
content: "";
clear: both;
display: table;
}
.child{
width: calc(50% - 4px);
border: 2px solid black;
float: left;
}<div class="container">
<div class="child">
Hello
<br/>hello
<br/>hello
<br/>hello
<br/>hello
</div>
<div class="child"> <br/>hello
<br/>hello
<br/>hello</div>
<div class="child"> <br/>hello
<br/>hello
<br/>hello</div>
<div class="child">
<br/>How can I make this shift up in the white space that is available above?
<br/>
<br/>
</div>
</div>null
在左下角的div中，顶部有一个空白我想把div上移到它上面，我怎么做呢？谢谢。
在这个场景中，最后一个元素不会“弹出”来填补上面的空白。
与其使用浮动divs，为什么不使用FlexBox呢？通过使.container显示为使用flex，并使其包装flex项，它将自动填充所需的空间。
下面的片段说明了:
null
*{
box-sizing: border-box;
}
.container{
width: 600px;
border: 2px solid red;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.container::after{
content: "";
clear: both;
display: table;
}
.child{
width: 50%;
border: 2px solid black;
}<div class="container">
<div class="child">
Hello
<br/>hello
<br/>hello
<br/>hello
<br/>hello
</div>
<div class="child"> <br/>hello
<br/>hello
<br/>hello</div>
<div class="child"> <br/>hello
<br/>hello
<br/>hello</div>
<div class="child">
<br/>How can I make this shift up in the white space that is available above?
<br/>
<br/>
</div>
</div>
处理这类问题的最好方法就是简单地使用grid
null
.container {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
height: 300px;
width: 450px;
border: 1px solid red;
grid-gap: 10px;
}
.child {
border: 1px solid black;
}<div class="container">
<div class="child">Hello <br>
hello <br>
hello <br>
hello <br>
hello</div>
<div class="child">
<br>
hello <br>
hello <br>
hello
</div>
<div class="child">
Just saying that <br>
grid's <br>
the <br>
best
</div>
<div class="child"></div>
</div>
你预期的结果就是砖石所做的。Masonry是一个用于前端开发的插件。
首先，您需要包含jquery和Masonry.js。这是必须的
<style>
.grid-item {
float: left;
width: calc(50% - 4px);
border: 2px solid hsla(0, 0%, 0%, 0.5);
background: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js">
</script>
那么您的html代码就在这里了。
<div class="grid">
<div class="child grid-item">
Hello
<br/>hello
<br/>hello
<br/>hello
<br/>hello
</div>
<div class="child grid-item"> <br/>hello
<br/>hello
<br/>hello
</div>
<div class="child grid-item"> <br/>hello
<br/>hello
<br/>hello
</div>
<div class="child grid-item">
<br/>How can I make this shift up in the white space that is available above?
<br/>
<br/>
</div>
</div>
在html代码的末尾，您需要调用masonry函数
<script type="text/javascript">
$('.grid').masonry({
// options
itemSelector: '.grid-item',
});
</script>
下面是代码的全貌。
<body>
<div class="grid">
<div class="child grid-item">
Hello
<br/>hello
<br/>hello
<br/>hello
<br/>hello
</div>
<div class="child grid-item"> <br/>hello
<br/>hello
<br/>hello
</div>
<div class="child grid-item"> <br/>hello
<br/>hello
<br/>hello
</div>
<div class="child grid-item">
<br/>How can I make this shift up in the white space that is available above?
<br/>
<br/>
</div>
</div>
<script type="text/javascript">
$('.grid').masonry({
// options
itemSelector: '.grid-item',
});
</script>
</body>
这是小提琴
