画廊使用Ul LI浮动

Question

我有一个图库视图，其中我使用UL LI元素，左边浮动，使其像一个画廊一样坐在基于内容所需的多行中。在第一行之后，它似乎变成干草线，如下所示。看起来问题出在Firefox上的MAC / Win7上

链接：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＆＃39; s）保持一致的高度，并切断任何多余的图像高度。