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」不能按預期工作

回答

相關問題