float:左边打破多行图像

时间:2014-08-25 12:59:48

标签: html css css-float

我在网站上遇到单页问题: http://www.modernprints.co.uk/artist/eduardo-paolozzi

screenshot of problem

以下' Eduardo Paolozzi出售'应该有六个图像作为两行三个,但由于某种原因,它创建三行。仅当存在多于3个图像(即多于一行)时才会发生这种情况。普通页面(即http://www.modernprints.co.uk/artist/lynn-chadwick)看起来像这样:

screenshot of normal page

奇怪的是,即使css几乎相同,下面的部分似乎也没有遇到同样的问题。

它与chrome相同,即和firefox。

3 个答案:

答案 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: 10pxtop:0似乎可以在Firefox中使用。