我正在开发一个响应式图片库，我正在修改我发现的一些代码。我已经制作了一个jsFiddle来向你展示我正在使用的东西。
我希望能够在图库中的每个图像下方放置几个按钮。如您所知，如果图像下方有图像，则上图中的图像会被切掉。我已经考虑过向.box添加保证金底部：
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 14.28%;
margin-bottom: 30px;
}
我想知道是否有更好的方法来解决这个问题。看起来如果你重新调整窗口的大小太小，文本就会重叠图像。
答案 0 :(得分：0)
您只需要在.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 :(得分：0)
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px'Lucida Sans', sans-serif;
}
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 10px;
}
.boxInner img {
width: 100%;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 10px;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 10px;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 10px;
}
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 10px;
}
}
@media only screen and (max-width : 1590px) and (min-width : 1291px) {
/* Large desktop: 5 tiles */
.box {
width: 20%;
padding-bottom: 10px;
}
}
@media only screen and (max-width : 1920px) and (min-width : 1591px) {
/* Extra large desktop: 6 tiles */
.box {
width: 16.6%;
padding-bottom: 10px;
}
}
1）删除位置：绝对;对于boxInner和box_container
2）避免使用花车和位置：绝对;一起
3）只有水平尺寸应按百分比定义，而不是垂直尺寸（衬垫底部：33％不好）
答案 2 :(得分：0)
似乎对这个问题最简单的解决办法就是修改框的css：
.box {
float: left;
position: relative;
width: 14.28%;
height: 14.28%;
margin-bottom: 40px;
}
高度是比填充底部更加语义的方式来获得你想要的东西，并确保文本正确显示（可能不应该绝对定位，但是小问题），添加边距底部
你也可以将保证金百分比作为百分比，使其达到盒子大小的百分比，比如20％左右，但如果你不担心小小的话，px可能是一个好主意。盒子是个问题（整个画廊不到50px）
希望有所帮助！
答案 3 :(得分：0)
我创造了一些东西来帮助大学生入门。我将您的图像调整为附加的代码。学生需要一些您没有要求的功能，但您可以轻松删除它们。
我相信它符合保留图像之间空间的意图，并允许每张图片的文本。文字被锁定在它的图片上。
代码没有经过优化，当然可以改进，但希望能让你更接近你想要的东西，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photo Viewer</title>
<style>
html {
border: 0 none transparent;
}
body {
padding: 0;
margin: 0;
font-family: arial, tahoma, sans-serif;
font-weight: 400;
font-size: 15px;
background: #FEFADA;
color: #2C2218;
width: 100%;
height: 100%;
border: none;
text-align: center;
font-style: normal;
font-weight: normal;
font-variant: normal;
cursor: pointer;
}
.picture {
/*Add venfor specific property*/
-webkit-column-count: 4;
/*Set the default to 4 columns*/
column-count: 4;
/*Set text line height*/
line-height: 1.5;
/*Add venfor specific property*/
-webkit-column-gap: 15px;
column-gap: 15px;
/*Outer margin for picture container*/
margin: auto 10px;
}
/*Switch to three columns at this display width*/
@media (max-width: 1024px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 3;
column-count: 3;
}
}
/*Switch to two columns at this display width*/
@media (max-width: 764px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 2;
column-count: 2;
}
}
/*Switch to one columns at this display width*/
@media (max-width: 480px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 1;
column-count: 1;
}
}
.hide {
display: none;
}
.img, .selected-img {
width: 100%;
margin: 8px auto;
white-space: nowrap;
}
.selected-img {
max-width: 1024px;
}
.selected {
position: fixed;
margin: 5px auto;
left: 0;
right: 0;
z-index: 10;
display: block;
}
.closeme {
-webkit-align-content: center;
left: 0;
right: 0;
width: auto;
margin: auto;
display: block;
}
.disable {
background: rgba(0, 0, 0, .3);
width: 100% !important;
height: 100% !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
position: fixed;
}
.btn {
border: 1px;
border-color: transparent #D1C89D transparent #D1C89D;
background: #EBE6C1;
height: 40px;
margin: auto 0;
width: 100%;
}
.picture-text {
margin: auto;
padding: 10px 3px;
display: table-cell;
white-space: normal;
}
.inline-block {
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<!-- Hide the selected image window until its needed with the hide class -->
<div id="selectedWindow" class="hide">
<button class="closeme btn" onclick="closeWindow()">Click this Button or on the Selected Image to close window.</button>
<!-- Load the selected image here -->
<img id="selectedImage" class="selected-img" onclick="closeWindow()" />
</div>
<button class="btn" onclick="loadImages()">Load Images</button>
<div id="imageContainer" class="picture" onclick="loadSelectedPicture(event)"></div>
<div id="disableMask"></div>
</div>
<script type="application/javascript">
function loadImages() {
// For DEBUG if you need it: alert("Made it to the function");
var element = document.getElementById("imageContainer");
var imageArray = ["http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg"];
var picture = "";
for (var i = 0; i < imageArray.length; i++) {
// Create an id for each image and add its class.
picture += "<div><img id=\"i" + i + "\" class=\"img\" src=\"" + imageArray[i] + "\"><div class=\"inline-block\"><div class=\"picture-text\">Here is some text for each image. How long can this text be before we have some issues.</div></div></div>";
// For DEBUG if you need it: console.log(picture);
}
element.innerHTML = picture;
}
function loadSelectedPicture(event) {
var target = event.target || event.srcElement;
this.stopEventPropagation(event);
var selectedElement = document.getElementById(target.id);
var imageElement = document.getElementById("selectedImage");
if (!selectedElement.src)
return;
imageElement.src = selectedElement.src;
document.getElementById("selectedWindow").className = "selected";
document.getElementById("disableMask").className = "disable";
}
function stopEventPropagation(event) {
if (!event)
event = window.event;
//IE9 & Other Browsers
if (event.stopPropagation) {
event.stopPropagation();
}
//IE8 and Lower
else {
event.cancelBubble = true;
}
}
function closeWindow() {
document.getElementById("selectedWindow").className = "hide";
document.getElementById("disableMask").className = "";
}
</script>
</body>
</html>
当我有空闲时间时，我会尝试用工作的jsFiddle更新这篇文章。