Question

我想使用“float：left”显示2列图像，我不知道为什么第3张图像在右边。

查看屏幕截图：http://dl.dropbox.com/u/72686/imagesFloat.png

请参阅HTML：

       <div class="field-item odd">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%202.png" title=""><br>
<span>description1</span>        </div>
              <div class="field-item even">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%203.png" title=""><br>
<span>description2</span>        </div>
              <div class="field-item odd">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%204.png" title=""><br>
<span>description3</span>        </div>
              <div class="field-item even">
                    <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%205.png" title=""><br>
<span></span>        </div>

参见CSS：

.field-field-image .odd {
padding-right:20px;
}
.field-field-image .even {
padding-left:20px;
}

.field-field-image .field-item {
float:left;
}

感谢

Answer 1

它在右边，因为第一个div旁边有空间。

对要开始新行的每个元素使用clear: left。

Answer 2

将margin-bottom:2px添加到第三张图片，查看图片是否随处可见。如果不是margin-bottom，则margin-top。

CSS：“float：left”不能按预期工作

2 个答案: