새 줄에 플로팅 div가 전체 공간을 확보하지 못함 [중복]
Nov 14 2020
마지막 div가 그 위에 남아있는 공간을 채우기 위해 위로 이동하려는이 예제가 있습니다.
*{
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>왼쪽 하단 div 상단에 공백이 있습니다. div를 위로 이동하고 싶습니다. 어떻게해야합니까? 감사합니다.
답변
1 Martin Nov 14 2020 at 11:19
이 시나리오에서 마지막 요소는 그 위의 공백을 채우기 위해 '팝업'되지 않습니다.
Floating을 div사용하는 대신 왜 flexbox를 사용하지 않습니까? 을 사용하여 .container디스플레이 를 만들고 flex플렉스 항목을 감싸게하면 원하는대로 공간이 자동으로 채워집니다.
아래 스 니펫은 다음을 보여줍니다.
*{
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>JeetViramgama Nov 14 2020 at 11:30
이런 종류의 물건을 다루는 가장 좋은 방법은 grid
.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>RedWingJusticeChan Nov 14 2020 at 11:43
예상되는 결과는 벽돌이 정확히 한 일입니다. Masonry는 frondend 개발을위한 플러그인입니다.
먼저 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 코드 끝에서 석조 기능을 호출해야합니다.
<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>
여기 바이올린입니다