文字和DIV含其他兩個div沒有內嵌

Question

下面是我用玩的jsfiddle：http://jsfiddle.net/kwAqu/12/

我需要的圖像與「信息」的div內聯。我嘗試了各種各樣的東西（製作信息和圖像跨度，從div中移除圖像並放置顯示：內聯img標記本身）。

關於如何解決此問題的任何想法？這是我希望它看起來像（你可以忽略邊框等）：

Answer 1

利用float: left;並指定文本類width包圍.infodiv。

您還需要將元素包裝在父元素中以確保項目正確對齊。我在演示中創建了一個div，ID爲wrapper。

HTML：

<div id="wrapper"> 
    <div class = "one"> 
     <div class = "image"><img src = "http://www.google.com/images/srpr/logo3w.png"></div> 
     <div class = "info"> 
      <div class = "title">this is my title</div> 
      <div class = "text">Hello this is what I'm trying to inline. but its not working! what's going on...?</div> 
     </div> 
    </div> 
</div> 

CSS：

#wrapper { 
width: 600px; 
} 

.image { 
    display: inline-block; 
    float: left; 
} 

.info { 
    display: inline-block; 
    float: left; 
    width: 200px; 
    padding: 0 0 0 15px; 
} 

注意：您可以調整爲填充相應的.infodiv，隨着wrapperdiv寬度一起。

演示：http://jsfiddle.net/Rm7Pg/

Answer 2

我想你正在尋找的是

.image { 
    display: inline-block; 
    vertical-align:middle; 
} 

這將嘗試將圖像與其餘元件匹配。

閱讀上它是這樣的地方如：

http://www.w3.org/wiki/CSS/Properties/vertical-align