Question

我正在使用这个CSS来创建一个非常简单的图片库：

.product_container {
    width:100%;
    display:block;
}
.product_images {
    width:45%;
    display:inline-block;
    border:1px solid black;
}
.product_images .large {

}
.product_images .small img {
    display:inline;
    float:left;
    margin:5px;
    width:151px;
}

我希望在该图像下有一个大图像然后是3行，我在这里创建了一个例子

https://jsfiddle.net/jdd9hzqo/

当页面调整大小时，小图像正在移动，但我希望它们保持3行并自行调整大小，但保持与.product_container

相同的大小

Answer 1

小提琴：https://jsfiddle.net/jdd9hzqo/2/

要做出的更改：

.product_images {
    width:100%;
    display:inline-block;
    border:1px solid black;
}
.product_images .large img {
    width:100%;
}
.product_images .small img {
    display: inline;
    float: left;
    width: 33%;
    box-sizing: border-box;
}

Answer 2

https://jsfiddle.net/jdd9hzqo/1/

删除float:left;

中的.product_images .small img {

并添加：

.small {
  white-space: nowrap;
}

要调整大小，请在width: 30%;

中添加.product_images .small img {之类的内容

css图像简单的图库显示

2 个答案: