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

我想用“float：left”显示2列图像，我不知道为什么第三个图像在右边。CSS：“float：left”不能按预期工作

见截图：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; 
}

感谢

来源

2010-04-26 aneuryzm

这是正确的，因为有房的第一个div身边。

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

来源

2010-04-26 08:38:13 Quentin

或者，您可以给每个'.field-item'一个固定的高度。 – akamike 2010-04-26 08:43:52

虽然如果字体大小发生变化（即使字体更改（因为用户没有安装第一个选项）而略有不同的尺寸），该趋势也会中断。 – Quentin 2010-04-26 08:58:36

将margin-bottom:2px添加到第三张图片，看图片是否在任何地方。如果不是margin-bottom,margin-top那么。

来源

2010-04-26 08:38:20

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

回答

相关问题