css - 一个 float 的 div 问题

Question

我已经建立了一个站点，但现在需要进行一些更改。左侧有一张主图片，右侧有一堆不同的缩略图 float 在大图片上。我想把大图放大占满页面，但是小图越过了右边的工具栏，而且一般到处都是。我可以按照自己的意愿将它们放在主图片下方，但它们会留在右侧，并带有一些莫名其妙的边距。

我只想让主图盖住页面，小图片在下面一行

网站页面在这里: http://www.residentialrealtors.co.uk/properties/12-chelsea-cloisters-sloane-aven/

影响这些div的代码是:

    .fsrep-main-image {float: left; margin-right: 8px; text-align: center;}
    .fsrep-main-image img { padding: 1px; border: 1px solid #CCC; }
    .fsrep-images {  } 
    .fsrep-aimages {margin-left: 0px;}
    .fsrep-aimage { float: left; width: 100px; height: 80px; padding: 0 10px 5px 0; margin-bottom: 4px; text-align: center; } 
    .fsrep

-aimage img { padding: 3px; border: 1px solid #CCC; }

主图是大图。 aimage 是单独的小块，aimages 是小块的集合。

我希望有人能提供帮助。我快疯了试图解决这个问题

Answer 1

尝试在 html 标签中添加一个清晰的类:

<div id="fsrep-aimages" class="clear">

然后将其添加到您的 css(除非您有等效的)

.clear  { clear: both;}

并从那个 div 中删除你的 362px 边距。然后它应该移动到下方并停止在你的脸上爆炸。

然后您可以将大图像放大到 div 的整个宽度