0
votes

Les div flottants sur une nouvelle ligne n'acquièrent pas tout l'espace

J'ai cet exemple où je veux que le dernier div se décale pour remplir l'espace qui reste au-dessus:

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

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

Dans le div inférieur gauche, il y a un espace blanc en haut Je voudrais déplacer le div vers lui, comment puis-je faire cela? Merci.

html css

0 commentaires

3 Réponses :

1
votes

Le dernier élément n'apparaîtra pas pour combler le vide au-dessus dans ce scénario.

Plutôt que d'utiliser des div flottants, pourquoi ne pas utiliser une flexbox? En faisant .container le .container comme en utilisant flex , et en le faisant envelopper les éléments flex, il remplira automatiquement l'espace comme vous le souhaitez.

L'extrait ci-dessous illustre:

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

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

2 commentaires

Mon opinion demeure que les votes anonymes contre les votes ne devraient pas être autorisés sur SO. Ils ne sont pas constructifs et ne contribuent pas à améliorer la qualité des questions et réponses.

Certes, j'ai posé une autre question avant celle-ci et j'ai été déclassé sans raison.

0
votes

La meilleure façon de gérer ce genre de choses est simplement d'utiliser la grid

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

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

Faites-moi savoir si cela ne fonctionne pas pour vous.

0 commentaires

0
votes

Votre résultat attendu est ce que la maçonnerie a fait exactement. Masonry est un plugin pour le développement frondend.

Vous devez d'abord inclure jquery et masonry.js. C'est le must

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

Ensuite, votre code html est ici.

        <script type="text/javascript">
        $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        });
    </script>

À la fin du code html, vous devez appeler la fonction de maçonnerie

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

Voici l'image complète du code.

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

Voici le violon

0 commentaires