html - CSS 四列宽度

Question

http://jsfiddle.net/YDLAJ/1/

我无法让我的列表项不重叠。我的容器宽度是 980px，四列在上面的 Jsfiddle 示例中正确排列，但在我的网站上却没有。

http://www.guytgunterappliances.com/manufacturers/

这是Html

<div style="width: 980px;">
<a href="http://www.guytgunterappliances.com/subzero-atlanta/"><img id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7353/10673034144_62c4da477b_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/thermador-atlanta/"><img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7353/10673023936_5454b7b056_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/miele-atlanta/"><img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5524/10672964305_b80a36b1e0_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/kitchenaid-atlanta/"><img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7400/10673024026_d1c2e8a43a_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/bosch-atlanta/"><img id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7396/10673034164_960a6e8e6d_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/bluestar-ranges-atlanta-2/"><img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7293/10673023696_5f941a8f60_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/ge-appliances-atlanta-2/"><img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5490/10672964455_527d7519bf_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/wolf-atlanta-ranges/"><img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2873/10673023806_2452893531_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/asko-atlanta-appliances/"><img id="img-4-grid-1" alt="" src="http://farm6.staticflickr.com/5491/10672964445_88a6263b8d_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/danver-cabinets-atlanta/"><img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7440/10673034704_a8f7dcd07a_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/elkay-sinks-atlanta/"><img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2860/10673024176_e2c6db268b_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/frigidaire-atlanta-appliances/"><img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7419/10672964565_b3d8d01416_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/grohe"><img id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7327/10672964625_f7464e1018_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/hoshizaki-ice-machines-atlanta/"><img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7411/10673024476_6422e33650_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/lynx-grill-atlanta/"><img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2865/10672964775_fed833543c_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/rohl-faucets-atlanta/"><img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2818/10672964805_6f7374f1be_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/scotsman-ice-machines-atlanta/"><img id="img-4-grid-1" alt="" src="http://farm4.staticflickr.com/3712/10672964895_6c5b430d7f_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/toto-toilets-atlanta/"><img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5480/10673023746_61fcea38de_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/u-line-atlanta/"><img id="img-4-grid" alt="" src="http://farm8.staticflickr.com/7403/10673034434_b80a36b1e0_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/vent-a-hood-hoods-atlanta/"><img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2868/10673035064_29eb85aee6_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/viking-range-atlanta/"><img id="img-4-grid-1" alt="" src="http://farm4.staticflickr.com/3735/10673244223_88cda72243_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/whirlpool-appliances-atlanta/"><img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5544/10673035264_8e5fa564a1_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/zephyr-range-hood-atlanta/"><img id="img-4-grid" alt="" src="http://farm6.staticflickr.com/5513/10673025016_a08233e22d_o.jpg" /></a>

<a href="http://www.guytgunterappliances.com/grill-dome-grills-atlanta/"><img id="img-4-grid" alt="" src="http://farm3.staticflickr.com/2827/10673244513_07296f01a5_o.jpg" /></a>
</div>

这是CSS

#img-4-grid-1 { 
width:237px; 
padding-bottom:10px;
float:left; 
}

#img-4-grid {
padding:0px 0px 10px 10px;
width:237px; 
float: left;
}

Answer 1

如果您查看底部元素，它们会完美对齐。问题出在您的第一项。在第一项中，图像位于 anchor 标记内。但其他人有段落标签，然后是 anchor 标签。尝试对您的第一个元素执行相同的操作。

将您的第一个元素代码编辑为...

   <p><a href="http://www.guytgunterappliances.com/subzero-atlanta/"><img class="lazy data-lazy-ready" id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7353/10673034144_62c4da477b_o.jpg" data-lazy-type="image" data-lazy-src="http://farm8.staticflickr.com/7353/10673034144_62c4da477b_o.jpg" style="display: block;"><noscript>&lt;img id="img-4-grid-1" alt="" src="http://farm8.staticflickr.com/7353/10673034144_62c4da477b_o.jpg" style="display: block;"></a></p>