定位問題與畫廊圖像

我在我的HTML文件畫廊及以下問題：定位問題與畫廊圖像

的形象是很好的顯示，唯一的問題是在第二排，在圖像的3「滑落」。這裏是一個圖片：

我試圖與柔性盒來解決這個問題，但我不完全得到如何使用它。順便說一下，該網站將不會上線，因爲我沒有權利使用圖片。這只是爲了學習。

代碼：

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>

來源

2017-10-17 Arborem

在你撥弄它的做工精細！ – weBBer

是的，但不幸的是，在我的html文件中，如果你使用的是漂浮物，那麼它不在我的html文件中 – Arborem

，並且由於文本的原因，一些只有更高的高度，下面的項目將顯示在較大項目的右側。在嘗試使用這種網格時，這是浮動的一個常見問題。如果你想進入Flexbox，我推薦這個簡單的教程！幫了我很多！ http://flexboxfroggy.com/ – Cheshire

當你漂浮在他們身邊，來解決這個問題是由於你的反應箱非一致的高度您將需要使用僞類: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>

來源

2017-10-17 07:57:07 Vincent1989

，因爲使用的是你必須有所有的元素相同的高度，否則他們將開始總是這樣浮動元素。

試着給元素的高度，看它是否有效。

來源

2017-10-17 07:31:30

好吧，所以我做了div.gallery img和。響應類的高度爲150px，響應類的寬度爲25％，並給它一個5em的邊緣。現在它可以工作，但我不知道我是否以正確的方式解決了問題。你怎麼看？ – Arborem

隨着浮動只有你可以做的很多。但即使使用Flexbox，如果您希望它們全部對齊，它們最終仍會保持相同的高度。 –

修改您responsive類這樣的：

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

來源

2017-10-17 07:38:12 Cons7an7ine

另外的東西已經說了（小提琴是否工作正常，問題可能出現由於未定義的高度），如果你想使用Flexbox的，那麼你就需要添加屬性flex-wrap:wrap。如果你想更好地理解flexbox，這裏是一個很好的解釋鏈接：flexbox guide

此外，如果任何機會固定高度不工作，那麼你需要檢查該區域（右鍵點擊該區域，然後單擊「檢查元素「），看看有什麼阻止其他圖像（在元素部分）。使用瀏覽器控制檯對於前端調試非常重要。

來源

2017-10-17 07:50:35 Berci

還嘗試對我來說

<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 this.its工作

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

來源

2017-10-17 07:54:02

定位問題與畫廊圖像

回答

相關問題