Css 响应式图片库

我正在开发一个快速响应的图片库，我希望修改我找到的一些代码。我制作了一个jsFiddle来向您展示我正在使用的东西

我希望能够有一对夫妇的按钮下面的每个图片在画廊。正如您所注意到的，如果图像下面有一个图像，则上面的图像将其文本切掉。我曾考虑过在

.box

中添加一个边距底部，如下所示：

.box {
    float: left;
    position: relative;
    width: 14.28%;
    padding-bottom: 14.28%;
    margin-bottom: 30px;
}

---

我想知道是否有更好的方法来解决这个问题。如果将窗口的大小调整得太小，文本会与图像重叠。

只需在.box container 30px上添加底部填充：

.box_container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 10px 30px 10px;
  margin-bottom: -35px;
  margin-left: 5px;
  margin-right: 5px;
}

1） 移除位置：绝对位置；适用于箱内和箱外集装箱

2） 避免使用浮动和位置：绝对；一起

---

3） 只有水平尺寸应定义为百分比，而不是垂直尺寸（底部填充：33%不好）

似乎解决此问题的最简单方法是修改框的css：

.box {
    float: left;
    position: relative;
    width: 14.28%;
    height: 14.28%;
    margin-bottom: 40px;
}

与填充底部相比，高度是一种更具语义的方式，以获取您要查找的内容，并确保文本正确显示（可能不应该绝对定位，但这是一个小问题），请在底部添加边距

你也可以将利润底部作为盒子大小的一个百分比，比如说，20%左右，但是如果你不担心小盒子会成为一个问题（整个画廊小于50px），那么px可能是一个好主意

---

希望有帮助

我创造了一些东西来帮助一个大学生开始学习。我根据所附代码调整了您的图像。学生需要一些你没有要求的功能，但是你可以很容易地删除它们

我相信它符合保留图像之间空间的意图，并允许每个图片使用文本。文本已锁定到其图片

代码没有经过优化，当然可以改进，但希望它能让你更接近你想要的

更新：

照片查看器
html{
边框：0非透明；
}
身体{
填充：0；
保证金：0；
字体系列：arial、tahoma、无衬线字体；
字体大小：400；
字体大小：15px；
背景：费法达；
颜色：#2C2218；
宽度：100%；
身高：100%；
边界：无；
文本对齐：居中；
字体风格：普通；
字体大小：正常；
字体变体：正常；
光标：指针；
}
.图片{
/*为特定属性添加属性*/
-webkit列数：4；
/*将默认值设置为4列*/
列数：4；
/*设置文本行高度*/
线高：1.5；
/*为特定属性添加属性*/
-webkit柱间隙：15px；
柱间距：15px；
/*图片容器的外缘*/
保证金：自动10px；
}
/*切换到此显示宽度的三列*/
@介质（最大宽度：1024px）{
.图片{
/*为特定属性添加属性*/
-webkit列数：3；
列数：3；
}
}
/*切换到此显示宽度的两列*/
@介质（最大宽度：764px）{
.图片{
/*为特定属性添加属性*/
-webkit列数：2；
列数：2；
}
}
/*切换到此显示宽度的一列*/
@介质（最大宽度：480px）{
.图片{
/*为特定属性添加属性*/
-webkit列计数：1；
列数：1；
}
}
.隐藏{
显示：无；
}
.img、.selected img{
宽度：100%；
保证金：8px自动；
空白：nowrap；
}
.选定的img{
最大宽度：1024px；
}
.选定{
位置：固定；
保证金：5px自动；
左：0；
右：0；
z指数：10；
显示：块；
}
.闭嘴{
-webkit对齐内容：中心；
左：0；
右：0；
宽度：自动；
保证金：自动；
显示：块；
}
.禁用{
背景：rgba（0,0,0,3）；
宽度：100%！重要；
身高：100%！重要；
左：0；
右：0；
排名：0；
底部：0；
z指数：5；
位置：固定；
}
.btn{
边界：1px；
边框颜色：透明#D1C89D透明#D1C89D；
背景：#EBE6C1；
高度：40px；
保证金：自动0；
宽度：100%；
}
.图文{
保证金：自动；
填充：10px 3px；
显示：表格单元格；
空白：正常；
}
.内联块{
显示：内联块；
空白：nowrap；
}
单击此按钮或选定图像以关闭窗口。
下面是每个图像的一些文本。在我们遇到一些问题之前，这篇文章能持续多久。”；
//用于调试，如果需要：console.log（图片）；
}
element.innerHTML=图片；
}
函数加载SelectedPicture（事件）{
var target=event.target | | event.src元素；
此.stopEventPropagation（事件）；
var selectedElement=document.getElementById（target.id）；
var imageElement=document.getElementById（“selectedImage”）；
如果（！selectedElement.src）
回来
imageElement.src=选择
.box {
    float: left;
    position: relative;
    width: 14.28%;
    height: 14.28%;
    margin-bottom: 40px;
}