图片库不会对齐赖特（html，css）

Question

我正在处理我的学校项目，但我的图片库无法按预期放入屏幕。

在第三张图片之后，它只是下降而不是排成一行。 任何帮助将不胜感激。 此外，尺寸都与轮廓不同，我不知道如何使它们成为一种尺寸。

 div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto } div.description { padding: 15px; text-align: center; }

 <div class="gallery"> <a target="_blank" href="NationalMall.jpeg"> <img src="NationalMall.jpeg" alt="NationalMall" width="600" height="400"> </a> <div class="description"> National Mall in Washington DC </div> </div> <div class="gallery"> <a target="_blank" href="GrandCanyon.jpeg"> <img src="GrandCanyon.jpeg" alt="GrandCanyon" width="600" height="400"> </a> <div class="description"> GrandCanyon in Arizona </div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="GettysBurg.jpeg" alt="Gettysburg" width="600" height="400"> </a> <div class="description"> Gettysburg in Pennsylvania</div> <div class="gallery"> <a target="_blank" href="NewYork.jpeg"> <img src="NewYork.jpeg" alt="NewYork" width="600" height="400"> </a> <div class="description"> NewYork City an der Ostküste </div> </div> <div class="gallery"> <a target="_blank" href="Disneyworld.jpeg"> <img src="Disneyworld.jpeg" alt="Disneyworld" width="600" height="400"> </a> <div class="description"> Disneyworld in Orlando Florida </div> </div> <div class="gallery"> <a target="_blank" href="LasVegas.jpeg"> <img src="LasVegas.jpeg" alt="LasVegas" width="600" height="400"> </a> <div class="description"> Las Vegas in Nevada </div> </div>

Answer 1

您的 HTML 中存在一些代码问题，您没有正确添加它。 在这里，我添加了 HTML 和 CSS。

CSS 代码

 div.gallery { margin:5px; border: 1px solid #ccc; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width:100%; height:auto } div.description { padding: 15px; text-align: center; }.gallery-items.gallery{ float: left }

 <div class="gallery-items"> <div class="gallery"> <a target="_blank" href="NationalMall.jpeg"> <img src="https://picsum.photos/200/300" alt="NationalMall" width="600" height="400" /> </a> <div class="description">National Mall in Washington DC</div> </div> <div class="gallery"> <a target="_blank" href="GrandCanyon.jpeg"> <img src="https://picsum.photos/200/300 " alt="GrandCanyon" width="600" height="400" /> </a> <div class="description">GrandCanyon in Arizona</div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="https://picsum.photos/200/300 " alt="Gettysburg" width="600" height="400" /> </a> <div class="description">Gettysburg in Pennsylvania</div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="https://picsum.photos/200/300 " alt="Gettysburg" width="600" height="400" /> </a> <div class="description">Gettysburg in Pennsylvania</div> </div> <div class="gallery"> <a target="_blank" href="GettysBurg.jpeg"> <img src="https://picsum.photos/200/300 " alt="Gettysburg" width="600" height="400" /> </a> <div class="description">Gettysburg in Pennsylvania</div> </div> </div>

Answer 2

尝试使用 .gallery{} 和 .description{} 而不是 div.gallery{}