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

您使用结构<p>→<a>→<img>。但是，您的文件中有一个拼写错误，<a>位于<p>之外。把它放在你的<p>里面它应该有用。所以：

<a href="http://www.guytgunterappliances.com/subzero-atlanta/">...</a>
<p></p>

到

<p>
   <a href="http://www.guytgunterappliances.com/subzero-atlanta/">...</a>
</p>

修改

这是我正在谈论的元素：

完整路径是：

html▶body▶div#container▶div#wrapper-container▶div#wrapper▶div#content▶div#narrowcolumn▶div#post-26.post ▶div.entry▶div

#表示ID和.类。

Answer 2

如果您查看底部项目，它们会完美对齐。问题出在你的第一个项目中。在第一项中，图像位于锚标记内。但其他人有段落标签，然后是锚标签。尝试对你的第一个项目做同样的事情。

将您的第一个商品代码编辑为此...

   <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>

Answer 3

在css .post .entry p img下，我删除了规则margin-bottom: 0;，并且所有内容都完全符合您的网站。