div行在前两行之后跳过一行

Question

在我的网页中，div中的前两行列表就足够了，它们有4列宽。在第三行的前两行之后，最左边的3列不在那里，但最右边的列上的列表元素在那里。下一行完全没问题，然后问题在第五行重复出现。下面是粗略的图表，其中*表示列表元素

* * * *
* * * *
      *
* * * *
      *

我搜索了类似的问题，但找不到任何匹配的东西，我确定它一定是在我的css .li中的某个东西，但我似乎找不到它。此外，该代码仅是与存在问题的区域相关的代码片段。如果整个代码(279行html和398行css)是需要的，让我知道。

提前谢谢你

css：

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery li {
    width: 260px;
    float: left;
    padding:17px;
    position: relative;
}
.gallery h3 {
    position: absolute;
    top: 190px;
    background: url(images/linkbg.jpg) repeat-x top left;
    padding: 5px;
    opacity: 0.85;
    width: 250px;
    text-align: center;
    border-radius: 0 0 10px 10px;
}
.gallery img {
    border-radius: 10px;
}
.poptrox-popup {
    background: #111111;
    border-radius: 8px;
    padding: 20px 20px 60px 20px;
    color: #aaaaaa;
}
.poptrox-popup .closer {
    position: absolute;
    width: 80px;
    height: 30px;
    bottom: 15px;
    right: 20px;
    background: url(images/linkbg.jpg) repeat-x top left;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    outline: 0;
    border-radius: 8px;
    line-height: 30px;
    text-shadow: 0 1px 1px #003A6C;
}
.poptrox-popup .closer:hover {
    background: #2094E6;
}
.poptrox-popup .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    line-height: 60px;
    padding: 0 20px 0 20px;
}

html：

<div id="main">
    <ul class="gallery">
        <li>
             <h3>Cisco 3560 Front</h3>
             <a href="images/cisco3560.jpg"><img class="top" src="images/cisco3560.jpg" width="260" height="200" title="Cisco 3560 Front View" alt="" /></a>

            <p>Cisco Catalyst 3560 Front View</p>
        </li>
        <li>
             <h3>Cisco 3560 Rear</h3>
             <a href="images/cisco3560rear.jpg"><img class="top"     src="images/cisco3560rear.jpg" width="260" height="200" title="Cisco 3560 Rear View" alt="" /></a>

            <p>Cisco 3560 Rear View</p>
        </li>
        <li>
             <h3>Cisco 2970</h3>
             <a href="images/cisco2970.jpg"><img class="top" src="images/cisco2970.jpg" width="260" height="200" title="Cisco 2970" alt="" /></a>

            <p>Cisco 2970 Front View</p>
        </li>
        <li>
             <h3>Cisco 3640 (NMA)</h3>
             <a href="images/cisco3640.jpg"><img class="top" src="images/cisco3640.jpg" width="260" height="200" title="OOB/NMA" alt="" /></a>

            <p>Cisco 3640 Front view. Commonly known in our network as an nma</p>
        </li>
        <li>
             <h3>Cisco 2621 (NM1)</h3>
             <a href="images/cisco2621.jpg"><img class="top" src="images/cisco2621.jpg" width="260" height="200" title="Cisco 2621 Front View" alt="" /></a>

            <p>Cisco 2621 Front view. Commonly known in our network as an nm1</p>
        </li>
        <li>
             <h3>Cisco 2621 Rear</h3>
             <a href="images/cisco2621rear.jpg"><img class="top" src="images/cisco2621rear.jpg" width="260" height="200" title="Cisco 2621 Rear View" alt="" /></a>

            <p>Cisco 2621 Rear view. The expansion ports would normally have modem cards installed in our network. This known by Mediacom as an nm1</p>
        </li>
        <li>
             <h3>Cisco 7600</h3>
             <a href="images/cisco7600.jpg"><img class="top" src="images/cisco7600.jpg" width="260" height="200" title="Cisco 7600 Front View" alt="" /></a>

            <p>Cisco 7600 Router Front view. The only one in the network currently is ar01.ent.demia</p>
        </li>
        <li>
             <h3>Cisco 7606</h3>
             <a href="images/cisco7606.jpg"><img class="top" src="images/cisco7606.jpg" width="260" height="200" title="Cisco 7606 Front View" alt="" /></a>

            <p>The Cisco 7606 is a smaller version of the 7609 vtn switch</p>
        </li>
        <li>
             <h3>Cisco 7609</h3>
             <a href="images/cisco7609.jpg"><img class="top" src="images/cisco7609.jpg" width="260" height="200" title="Cisco 7609 Front View" alt="" /></a>

            <p>Cisco 7609 Front view. More commonly known as a VTN Switch</p>
        </li>
        <li>
             <h3>Cisco 1711 Front</h3>
             <a href="images/cisco1711.jpg"><img class="top" src="images/cisco1711.jpg" width="260" height="200" title="Cisco 1711 Front View" alt="" /></a>

            <p>Cisco 1711 Router Front view.</p>
        </li>
        <li>
             <h3>Cisco 1711 Rear</h3>
             <a href="images/cisco1711rear.jpg"><img class="top" src="images/cisco1711rear.jpg" width="260" height="200" title="Cisco 1711 Front View" alt="" /></a>

            <p>Cisco 1711 Router Rear view.</p>
        </li>
    </ul>
</div>

Answer 1

根本原因您的实际设计将在浏览器宽度中为您提供尽可能多的LI，这是因为您使用的是浮动，而您没有提供高度，因此您有多个高度会影响设计。

添加高度:310px；到.gallery li类。

示例 http://goo.gl/QC9IjD