Question

这就是我想要实现的目标。我的问题当然是正确生成缩略图。我尝试的是使用阴影而不是灰色轮廓的边框，我打算为缩略图添加边距，这样他们就可以看到你可以看到的共同轮廓。我几乎没有想法和方法让这个工作，所以我想听听你的建议。事情是我希望这是响应所以我给缩略图和所有的百分比尺寸。这是代码：

<div class="gallery preview">
    <div class="main frame">
        <img src="images/pic-1.png" class="img-responsive" alt="a">
    </div>
    <div class="navigation">
        <div class="control left">
            <i class="fa fa-fw fa-chevron-left"></i>
        </div>
        <div class="thumb clearfix">
            <div class="frame">
                <img src="images/pic-1-thumb.png" class="img-responsive" alt="a">
            </div>
            <div class="frame">
                <img src="images/pic-2-thumb.png" class="img-responsive" alt="a">
            </div>
            <div class="frame">
                <img src="images/pic-3-thumb.png" class="img-responsive" alt="a">
            </div>
            <div class="frame">
                <img src="images/pic-1-thumb.png" class="img-responsive" alt="a">
            </div>
            <div class="frame">
                <img src="images/pic-2-thumb.png" class="img-responsive" alt="a">
            </div>
            <div class="frame">
                <img src="images/pic-3-thumb.png" class="img-responsive" alt="a">
            </div>
            <div class="frame">
                <img src="images/pic-1-thumb.png" class="img-responsive" alt="a">
            </div>
        </div>
        <div class="control right">
            <i class="fa fa-fw fa-chevron-right"></i>
        </div>
    </div>
</div>

和css：

.preview.gallery {
    margin: 10px 0;
}

.preview.gallery .frame {
    border-radius: 3px;
}

.preview.gallery .thumb {
    max-width: 508px;
    float: left;
    margin: 1px;
}

.preview.gallery .navigation .control {
    width: 22px;
    display: block;
}

.preview.gallery .navigation .control.left {
    float: left;
}

.preview.gallery .navigation .control.right {
    float: right;
}

.preview.gallery .thumb .frame {
    width: 14.28571428571429%;
    display: block;
    float: left;
}

.preview.gallery .thumb .frame img {
    width: 100%;
}

.preview.gallery .frame {
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.5);
}

.preview.gallery .main.frame {
    border: 8px solid #fff;
}

.preview.gallery .navigation .control {
    background: #fff;
    line-height: 74px;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.5);
    margin-top: 1px;
    border-radius: 3px;
}

Answer 1

<强> 1 即可。将 .navigation 的位置设置为relative（以便我们可以将两个控件放在此流体div的一侧）：

.navigation {
    position:relative;
}

2. 添加到 .preview.gallery .navigation .control 此css代码：

.preview.gallery .navigation .control {
    position:absolute;
    top:0;
}

3。以及左侧导航div：

.preview.gallery .navigation .control.left {
    left:0;
}

4。以及右侧导航div：

.preview.gallery .navigation .control.right {
    right:0;
}

5. 最后将 .preview.gallery .thumb 的边距更改为：

.preview.gallery .thumb {
    margin:0 22px; /* or whatever width you have on the controls */
}

DEMO.

注意

你提到想要在缩略图和边框之间留出一些空间。为了使用你分配它们的percentege值，你也想要添加这个代码：

.preview.gallery .frame {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

用缩略图问题构建一个画廊

1 个答案:

注意