使用Ul LI float的画廊

Question

我有一个画廊视图，我使用带有左浮动的 UL LI 元素，使其像画廊一样，根据内容需要有多行。在第一行之后，它似乎变得混乱，如下所示。看起来问题出在 MAC/Win7 上的 Firefox 中

链接：http://archangle.mink7.com/portfolios（页脚图库）

<ul class="gallery">
                                      <li> <a href="#"> <img alt="video" src="/img/portfolios/video.jpg">   <span><i class="fa fa-link"></i></span> </a> </li>
                                      <li> <a href="#"> <img alt="Concept Gallery" src="/img/portfolios/concept-gallery-2.jpg">   <span><i class="fa fa-link"></i></span> </a> </li>
                                      <li> <a href="#"> <img alt="Concept Gallery" src="/img/portfolios/concept.jpg">   <span><i class="fa fa-link"></i></span> </a> </li>
                                      <li> <a href="#"> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery2.jpg">   <span><i class="fa fa-link"></i></span> </a> </li>
                                      <li> <a href="#"> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery-1.jpg">   <span><i class="fa fa-link"></i></span> </a> </li>
                                      <li> <a href="#"> <img alt="Commercial Image" src="/img/portfolios/commercial-gallery-2.jpg">   <span><i class="fa fa-link"></i></span> </a> </li>
                                    </ul>

CSS：

.gallery {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.gallery li {
    float: left;
    width: 33%;
}
.comment-image, .gallery li, .post-small .image, .post-image, .portfolio-item {
    display: block;
    position: relative;
}

Answer 1

FireFox 中的高度不一致，因此最后一行会出现一个孤儿。尝试将其添加到您的图库中：

.gallery li {
   float: left;
   width: 33%;
   height:100px;
   overflow:hidden;
}

这将强制图像容器（li）保持一致的高度，并剪掉任何多余的图像高度。

Answer 2

Wasted (GTA V) 徽标历史（2016-2024）