Question

所以我试图使用Bootstrap创建一个照片库，我暂时陷入困境。

首先，这是一个github链接，以便您可以查看该网站。

http://torgian.github.io/website-dev

转到图库并更改浏览器宽度。您可以看到图像的高度不同，但似乎没有正确排列。

我花了大约7个小时搜索并尝试不同的事情，但无济于事。所以我终于在这里问了。

目前我还在学习HTML和CSS，所以我还没有触及过javascript。如果可能的话，我想找到一个CSS解决方案。

我希望实现的目标类似于：http://www.nasarow-fo-to.com/new-gallery

点击右下角的方块，你会看到我的画廊弹出：你可以看到我想要实现的目标。一个漂亮的，甚至是一排缩略图，桌面上有3或4个缩略图。

Answer 1

我建议将所有图像的 height 设置为相同的值，然后将width样式设置为auto。在此之后，将页面溢出样式设置为break-line，它应该正确对齐。

如何执行此操作的示例如下：

body{
    overflow: break-line  //Break the line on content overflow
}
img{
    width: auto;          //Set the width based on the height
    height:10%;           //Set the image hight to 10% of the page
    margin: 20px;         //Set a margin between images
}

Answer 2

你可以给img标签赋予特定的宽度和高度

img{
width:20%;
height:20%;

}

Bootstrap画廊：不同高度的照片不会排队

2 个答案: