定位图库图像的问题

Question

我的html文件中有一个图库和以下问题：

图像显示得很好，唯一的问题是第二行，其中3张图像＆＃34;滑落＆＃34;。这是一张图片：

我试图用弹性盒解决这个问题，但我还没有完全掌握它的使用方法。 顺便说一下，该网站不会上线，因为我没有权利使用这些图片。 这只是为了学习。

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为你正在使用浮动元素，所以你必须将所有元素都放在相同的高度，否则它们会像这样开始。

尝试给元素赋予高度，看它是否有效。

Answer 2

将您的responsive课程修改为：

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

Answer 3

除了已经说过的（小提琴正在工作且问题可能由于未定义的高度而出现）如果你想使用flexbox，那么你需要添加属性flex-wrap:wrap。如果你想更好地理解flexbox，这里有一个很好解释的链接：flexbox guide

此外，如果固定高度不起作用，则需要检查该区域（右键单击该区域并单击“检查元素”）并查看阻塞其他图像的内容（在元素部分） 。使用浏览器控制台对于前端调试非常重要。

Answer 4

也试试这个。为我工作

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

和css

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

Answer 5

问题是由于响应框中的高度不一致而你浮动它们，为了解决这个问题，你需要使用伪类:nth-of-type 在每六个元素之后清除浮点数。

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

示例：

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>