响应图片库

问题描述 投票：1回答：4

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

jsFiddle

我希望能够在图库中的每个图像下方放置几个按钮。如您所知，如果图像下方有图像，则上图中的图像会被切掉。我想过为.box增加一个保证金底部：

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

jsFiddle with margin-bottom

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

css responsive-design
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;
}
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）只有水平尺寸应按百分比定义，而不是垂直尺寸（衬垫底部：33％不好）

0
投票

似乎对这个问题最简单的解决办法就是修改盒子的css：

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

高度是一种比填充底部更加语义的方式来获得你想要的东西，并确保文本正确显示（可能不应该绝对定位，但是小问题），添加一个边距底部。

您还可以将保证金底部百分比设为百分比，使其占百分比的百分比，例如20％左右，但如果您不担心小小的盒子是一个px可能是一个好主意问题（整个画廊不到50px）

希望有所帮助！

0
投票

我创造了一些东西来帮助大学生入门。我将您的图像调整为附加的代码。学生需要一些您没有要求的功能，但您可以轻松删除它们。

我相信它符合保留图像之间空间的意图，并允许每张图片的文本。文字被锁定在它的图片上。

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

更新：Example Photo Gallery

<!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来更新这篇文章。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.