Question

目前我有水平显示的照片缩略图，如下例所示： -

我只想将其更改为垂直显示。以下是我目前的CSS代码： -

主页HTML＆gt;＆gt;

<li id="gallery">
            <h3>Our Portfolio</h3>
            <div class="gallery">
                <div class="pic"><img src="images/gallery-pic-1.jpg" class="sh" alt="" /></div>
                <div class="thumbs blo">
                    <ul>
                        <li><a href="images/gallery-pic-1.jpg"><img src="images/gallery-thumb-1.jpg" alt="" /></a></li>
                        <li><a href="images/gallery-pic-2.jpg"><img src="images/gallery-thumb-2.jpg" alt="" /></a></li>
                                            </ul>
                </div>
                <div class="btns">
                    <a href="#" class="button" data-type="prevPage"></a>
                    <a href="#" class="button" data-type="nextPage"></a>
                </div>
            </div>
        </li>

CSS＆GT;＆GT;

.gallery .pic{
margin-right:20px;
position:relative;
    float:left;
} 

.gallery .thumbs li{
    margin-right:10px;
}

.gallery .thumbs li a{
position:relative;
display:inline-block;
}

.gallery .thumbs li a span{
position:absolute;
left:0;top:0;right:0;bottom:0;
border:1px #fff solid;
opacity:0;

-webkit-transition:all 0.3s ease-in-out; 
-moz-transition:all 0.3s ease-in-out; 
-o-transition:all 0.3s ease-in-out; 
transition:all 0.3s ease-in-out;
}

 .gallery .thumbs li.active a span,.gallery .thumbs li a:hover span{
opacity:1;
}

.gallery .btns{
position:relative;
height:41px;
}

.gallery .btns a{
width:41px;
height:41px;
display:block;
background:url(../images/gallery-btn-sp.png);
position:absolute;
top:0;  
}

.gallery .btns a[data-type=prevPage]{
left:0;
}

.gallery .btns a[data-type=prevPage]:hover{
background-position:0 100%;
}

.gallery .btns a[data-type=nextPage]{
background-position:100% 0;
right:10px;
}

.gallery .btns a[data-type=nextPage]:hover{
background-position:100% 100%;
}

.gallery .spinner{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:url(../images/ajax-loader.gif) 50% 50% no-repeat;
}

感谢帮助......：）

Answer 1

尝试

.gallery .thumbs li {
    float: none;
    display: block;
    margin-right: 10px;
}

.gallery .thumbs li a{
    display: block;
    position: relative;
}

Answer 2

也许你的大拇指漂浮了，所以只需在拇指元素上移除浮动。

.gallery .thumbs li {
     float: none;
}

将照片缩略图更改为垂直显示而不是水平显示

2 个答案: