在我的网页中，div中的前两行列表很好，它们是4列宽。在第三行的前两行之后，最左边的3列不存在，但是最右边列的列表元素是。下一行完全正常，然后在第5行重复问题。下面的粗略图表，其中*表示列表元素
* * * *
* * * *
*
* * * *
*
搜索了类似的问题，但找不到匹配的东西，我确定它必须是我的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>
答案 0 :(得分：1)
ROOT CAUSE 您的实际设计将为您提供浏览器宽度可以包含的LI，因为您使用浮动并且没有提供高度，因此您有多个高度会影响设计。
<强> FIX 加高度：310px;到.gallery li class。