我在网站上遇到单页问题: http://www.modernprints.co.uk/artist/eduardo-paolozzi
以下' Eduardo Paolozzi出售'应该有六个图像作为两行三个,但由于某种原因,它创建三行。仅当存在多于3个图像(即多于一行)时才会发生这种情况。普通页面(即http://www.modernprints.co.uk/artist/lynn-chadwick)看起来像这样:
奇怪的是,即使css几乎相同,下面的部分似乎也没有遇到同样的问题。
它与chrome相同,即和firefox。
答案 0 :(得分:0)
请使用"清除:两者"在每3张图片中。
<style>
.myclear{
clear:both;
}
</style>
<div class="thumb-small" style="padding-right:10px;">...</div>
<div class="thumb-small" style="padding-right:10px;">...</div>
<div class="thumb-small" style="padding-right:10px;">...</div>
<div class = "myclear"></div>
<div class="thumb-small" style="padding-right:10px;">...</div>
<div class="thumb-small" style="padding-right:10px;">...</div>
<div class="thumb-small" style="padding-right:10px;">...</div>
或
<div>
<h2 class="printsforsale">Eduardo Paolozzi prints for sale</h2>
<div class="thumb-small" style="padding-right:10px;">
<div class="thumb-small" style="padding-right:10px;">
<div class="thumb-small" style="padding-right:10px;">
<div class="thumb-small" style="padding-right:10px; clear:both;">
<div class="thumb-small" style="padding-right:10px;">
<div class="thumb-small" style="padding-right:10px;">
</div>
<div style="margin-top:259px; clear:both;">
答案 1 :(得分:0)
因为你已经给出了
.new-overlay {
height:34px;
margin: -18px;
}
答案 2 :(得分:0)
问题出现了,因为你的一些漂浮元素的高度略有不同,125px与123px。
如果查看.thumb-small
元素,有时会添加.new-overlay
元素
您使用相对定位进行定位,这会导致额外的2px被添加到
.thumb-small
元素的高度,这会导致花车跳过&#34;跳过步骤&#34;可以这么说。
解决此问题的方法之一是按如下方式修改CSS:
首先,.thumb-small
添加position: relative
。
其次,对于.new-overlay
,请使用position: absolute
代替position:relative
和
相应地调整偏移以获得右上角的GIF,right: 10px
和top:0
似乎可以在Firefox中使用。