如何將HTML圖片/文本放在div的同一行上？

Question

我一直在使用HTML/CSS約2周。

我無法讓我的site上的文字坐在小狗縮圖旁邊，而不是在它下面。

如果我浮動文本和圖片，他們並排，但文本是第一，而不是圖片。爲什麼會這樣？該文本在HTML中的圖片之後出現。

這裏是JSFiddle。我以前從未使用過JSF，所以我希望我做的正確。我不知道爲什麼JSF中的圖片不工作（外部鏈接的（小狗））。

http://jsfiddle.net/nhv54/

Answer 1

當排隊的圖像和文本，我喜歡使用內聯或內聯塊元素，而不是把它們的塊元件的內部。 Here is an example特別適合你的情況。

的Html

<p> 
    Vertically centered text 
    <img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle"> 
</p>​ 

Answer 2

檢查了這一點 http://jsfiddle.net/nhv54/3/

相近的CSS注意到

.pull-left * { 
     float: left;  
} 

而且每個div的，你要的內容在一行上應該有一流「左拉「

<div class = "ProjectsModules pull-left" id = "example1"> 
    <img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy    .jpg"/> 
    <div id = "ProjectsModulesText"> 
    <h1> Jim </h1> 
    <p> 
     stuff 
    </p> 
    </div> 
</div> 

Answer 3

您還可以設置vertical-align: middle;您的文本在裏面的任何標籤，大概是p。

Answer 4

你可以使用內嵌塊

我更新您的jsfiddle

http://jsfiddle.net/nhv54/16/