question de positionnement avec des images de la galerie

J'ai une galerie dans mon fichier html et le problème suivant:question de positionnement avec des images de la galerie

L'image sont affichées bien, le seul problème est la deuxième ligne, où 3 des images « glisser vers le bas ». Voici une photo:

J'ai essayé de résoudre ce avec une boîte flex, mais je ne suis pas tout à fait comment l'utiliser. Par ailleurs, le site ne sera pas mis en ligne parce que je n'ai pas le droit d'utiliser les images. C'est juste pour apprendre.

code:

section p { 
 
    margin-left: 5%; 
 
} 
 

 

 
section p iframe { 
 
    float: left; 
 
    margin-right: 2%; 
 
} 
 

 

 

 

 
div.gallery { 
 
    border: 1px solid #ccc; 
 
} 
 

 
div.gallery:hover { 
 
    border: 1px solid #777; 
 
} 
 

 
div.gallery img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
.responsive { 
 
    padding: 2em; 
 
    float: left; 
 
    width: 15%; 
 
}

<section> 
 
     
 
     <p><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/f2aSCvUhUBc" frameborder="0" allowfullscreen></iframe>The Witcher 3 ist eines der imposantesten Rollenspiele des 21. Jahrhunderts und nicht ohne Grund<br>mit über 800 Awards ausgezeichnet worden.<br>Das Spiel handelt vom Hexer Geralt, der die Welt vor dem weissen Frost bewahren soll,<br>besser gesagt soll dies seine Ciri (Cirilla), ein Kind des älteren Blutes und Tochter des Kaisers von Nilfgaard. Nur älteres Blut vermag den Frost aufzuhalten.<br>Doch dieses Spiel ist soviel mehr als nur eine Storyline:<br>Das Spiel lebt von einer dynamischen Welt, die sich ständig ändert, je nach dem, was Geralt im Laufe des Spiels für Entscheidungen trifft.<br> Insgesamt gibt es 36 verschiedene Enden und die NPCs verleihen dem Spiel ebenso viel Leben, wie die Musik, die Geräusche, die Landschaft und die sogenannte 40-Sekunden-Regel.<br>Diese besagt, dass im Spiel alle 40 Sekunden irgendetwas Spannendes passieren muss,<br>um den Spieler zu fesseln. Sei es ein Monster, eine vorbeirennende Rehherde oder ein umherstreifender Bandit.<br>Alles im Spiel ist kontext-sensitiv und hat Folgen, alles ist bis ins Kleinste durchdacht und hängt irgendwie zusammen.<br>Dieses Meisterwerk bietet wesentlich mehr, als so mancher Ego-Shooter und dergleichen.</p> 
 
     
 
     
 
     <br style="clear:both;" /> 
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/witcher3_en_wallpaper_hearts_of_stone_olgierd_1920x1200_1446735934.png"> 
 
      <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/B1VXMu9UhiS.png"> 
 
      <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/Tw3_Blood_and_Wine_cover_art.jpg"> 
 
      <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/B1GDw8ra8QS.png"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Mountains" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/witcher3-new-game-plus-screenshot.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/1._Some_creatures_will_be_more_prone_to_inflammation_than_others._The_Igni_singn_works_perfectly_on_the_fiend..jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/NBFHut1.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/NEW_The_Witcher_3_Wild_Hunt_Ice_Giant_Hunt.png"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
    
 
    
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/witcher3-turm-screen.png"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/The-Witcher-3-9.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/wwh-3-1.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/2.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
</section>

Source

2017-10-17 Arborem

Dans votre violon son beau travail.! – weBBer

Oui, mais malheureusement pas dans mon fichier html – Arborem

si vous utilisez des flottants, comme il semble, et certains ont juste une plus grande hauteur à cause du texte, les éléments ci-dessous s'affichent à droite de cet élément plus gros. C'est un problème commun avec les flotteurs tout en essayant d'utiliser ce genre de grilles. Si vous voulez entrer dans la flexbox, je recommande ce tutoriel simple! m'a beaucoup aidé! http://flexboxfroggy.com/ – Cheshire

Le problème est dû à la hauteur non cohérente dans votre boîte réactif pendant que vous flotter autour, pour résoudre ce problème Vous devrez utiliser la pseudo classe :nth-of-type pour effacer les flottants après chaque sixième élément.

.responsive:nth-of-type(6n+1) { 
    clear: both; 
}

Exemple:

section p { 
 
    margin-left: 5%; 
 
} 
 

 

 
section p iframe { 
 
    float: left; 
 
    margin-right: 2%; 
 
} 
 

 

 

 

 
div.gallery { 
 
    border: 1px solid #ccc; 
 
} 
 

 
div.gallery:hover { 
 
    border: 1px solid #777; 
 
} 
 

 
div.gallery img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
.responsive { 
 
    box-sizing: border-box; 
 
    padding: 1em; 
 
    float: left; 
 
    width: 15%; 
 
} 
 

 
.responsive:nth-of-type(6n+1) { 
 
    clear: both; 
 
}

<section> 
 
     
 
     <p><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/f2aSCvUhUBc" frameborder="0" allowfullscreen></iframe>The Witcher 3 ist eines der imposantesten Rollenspiele des 21. Jahrhunderts und nicht ohne Grund<br>mit über 800 Awards ausgezeichnet worden.<br>Das Spiel handelt vom Hexer Geralt, der die Welt vor dem weissen Frost bewahren soll,<br>besser gesagt soll dies seine Ciri (Cirilla), ein Kind des älteren Blutes und Tochter des Kaisers von Nilfgaard. Nur älteres Blut vermag den Frost aufzuhalten.<br>Doch dieses Spiel ist soviel mehr als nur eine Storyline:<br>Das Spiel lebt von einer dynamischen Welt, die sich ständig ändert, je nach dem, was Geralt im Laufe des Spiels für Entscheidungen trifft.<br> Insgesamt gibt es 36 verschiedene Enden und die NPCs verleihen dem Spiel ebenso viel Leben, wie die Musik, die Geräusche, die Landschaft und die sogenannte 40-Sekunden-Regel.<br>Diese besagt, dass im Spiel alle 40 Sekunden irgendetwas Spannendes passieren muss,<br>um den Spieler zu fesseln. Sei es ein Monster, eine vorbeirennende Rehherde oder ein umherstreifender Bandit.<br>Alles im Spiel ist kontext-sensitiv und hat Folgen, alles ist bis ins Kleinste durchdacht und hängt irgendwie zusammen.<br>Dieses Meisterwerk bietet wesentlich mehr, als so mancher Ego-Shooter und dergleichen.</p> 
 
     
 
     
 
     <br style="clear:both;" /> 
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/witcher3_en_wallpaper_hearts_of_stone_olgierd_1920x1200_1446735934.png"> 
 
      <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/B1VXMu9UhiS.png"> 
 
      <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/Tw3_Blood_and_Wine_cover_art.jpg"> 
 
      <img src="https://dummyimage.com/600x500/000/fff" alt="Trolltunga Norway" width="600" height="500"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/B1GDw8ra8QS.png"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Mountains" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/witcher3-new-game-plus-screenshot.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/1._Some_creatures_will_be_more_prone_to_inflammation_than_others._The_Igni_singn_works_perfectly_on_the_fiend..jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/NBFHut1.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/NEW_The_Witcher_3_Wild_Hunt_Ice_Giant_Hunt.png"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
    
 
    
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/witcher3-turm-screen.png"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/The-Witcher-3-9.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/wwh-3-1.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
     
 
     
 
     
 
     
 
    <div class="responsive"> 
 
     <div class="gallery"> 
 
     <a target="_blank" href="resources/img/2.jpg"> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Northern Lights" width="600" height="400"> 
 
     </a> 
 
     <div class="desc">Add a description of the image here</div> 
 
     </div> 
 
    </div> 
 
     
 
</section>

Source

2017-10-17 07:57:07 Vincent1989

puisque vous utilisez des éléments flottants, vous devez avoir tous les éléments que même hauteur sinon ils vont partir agir comme ça. Essayez de donner la hauteur aux éléments, voir si cela fonctionne.

Source

2017-10-17 07:31:30

Ok, donc j'ai fait le divgallery img et le.La classe responsive a une hauteur de 150px, donne à la classe .responsive une largeur de 25% et lui donne une marge supérieure de 5em. Maintenant ça marche mais je ne sais pas si j'ai résolu le problème correctement. Qu'est-ce que tu penses? – Arborem

Avec le flotteur, il n'y a que peu de choses que vous pouvez faire. Mais encore une fois avec flexbox si vous voulez que tous soient alignés, ils finiront par avoir la même hauteur. –

Modifier votre responsive classe à ceci:

.responsive { 
    padding: 2em; 
    width: 15%; 
    display: inline-block; 
    vertical-align: top; 
}

Source

2017-10-17 07:38:12 Cons7an7ine

En plus de ce qui a déjà été dit (violon fonctionne et le problème semble sans doute en raison de la hauteur non définie) si vous voulez utiliser FlexBox, alors vous devez ajoutez la propriété flex-wrap:wrap. Si vous voulez mieux comprendre flexbox voici un lien qui explique assez bien: flexbox guide

Aussi si par hasard la hauteur fixe ne fonctionne pas alors vous devez inspecter cette zone (clic droit sur la zone et cliquez sur "inspecter" element ") et voyez ce qui bloque les autres images (sur la section des éléments). L'utilisation de la console du navigateur est très importante pour le débogage frontal.

Source

2017-10-17 07:50:35 Berci

aussi essayer this.its travail pour moi

<div class="rowrow"><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Amrish Patel</h3> 
              <p>CEO and Managing Director</p> 
              <p>CEO and Managing Director</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Amit Goyal</h3> 
              <p>Chief Technical Officer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Dimple Goyal</h3> 
              <p>Software Engineer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="i{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Nisarg Patel</h3> 
              <p>Full Stack Developer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Nikita Sarang</h3> 
              <p>Software Engineer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Reshma Bhagwani</h3> 
              <p>Software Engineer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Dhruvi Kothari</h3> 
              <p>Software Engineer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Darshit Patel</h3> 
              <p>Front-end Developer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Ghanshyam Prajapati</h3> 
              <p>Front-end Developer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Ravi Pitroda</h3> 
              <p>Software Engineer</p> 
             </div> 

            </article> 
           </div><div class="item"> 
            <article> 
             <div><img src="{{ 'itemimg.jpg' | asset_url }}"></div> 
             <div class="boxContent team-box-border"> 
              <h3>Radhesh Vayeda</h3> 
              <p>Full Stack Developer</p> 
             </div> 

            </article> 
           </div> 


          </div>

et css

.item { 
    display:inline-block; 
    width: 33.33%; 
    text-align: center; 
}

Source

2017-10-17 07:54:02

question de positionnement avec des images de la galerie

Répondre

Questions connexes