1

我正在开发一个响应式图片库，并且正在寻找修改我找到的一些代码。我制作了一个 jsFiddle 来向您展示我正在使用的内容。

jsFiddle

我希望能够在图库中的每个图像下方有几个按钮。如您所见，如果图像下方有图像，则上方图像的文本会被截断。我考虑过.box这样添加边距底部：

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

jsFiddle 底部边距

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

4

4 回答 4

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;
}
于 2013-08-15T12:43:58.400 回答
0

似乎这个问题最简单的解决方案可能是修改盒子的 css：

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

height 是一种比 padding-bottom 更语义化的方式来获取您正在寻找的内容，并确保文本正确显示（可能不应该绝对定位，但小问题），添加一个 margin-bottom。

您也可以将 margin-bottom 设置为百分比以使其成为框大小的百分比，例如 20% 左右，但如果您不担心很小的小框是问题（整个画廊小于 50 像素）

希望有帮助！

于 2013-08-15T12:52:20.057 回答
0

http://jsfiddle.net/jFwYU/3/

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）只有水平尺寸应该以百分比定义，而不是垂直尺寸（padding-bottom:33% 不好）

于 2013-08-15T12:48:03.497 回答
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 更新这篇文章。

于 2017-12-26T02:00:59.030 回答