Align Elements HTML/CSS float or display：inline-block

Question

任何人都可以幫我解決這個問題嗎？ 你不能改變HTML結構，但你必須調整CSS才能使它在同一行中（如果可能的話）...

在此先感謝！

這裏的問題：

http://jsfiddle.net/NgfSF/24/

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

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

img { 
    background-color:#FFF; 
    width:40px; 
    height:40px; 
    display:inline-block; 
    border:solid black 1px; 
    float: left; 
} 

編輯： 對於一個誰需要這個在未來，文本必須是顯示：塊和圖像只是浮動，向左或向右。

Answer 1

http://jsfiddle.net/NgfSF/25/

.description { 
    width: 10%; 
} 

.description1 { 
    width: 90%; 
} 

加在一起時，像上面只要給他們在100％的寬度。相應地調整。

Answer 2

將圖像放在與您想要的旁邊的同一個div中...給圖像帶來類似的風格...您不必將它放在單獨的div中

Answer 3

從.description1刪除浮動還增加了一個填充來描述，以提高美學。這是因爲你不能像你說的那樣改變html部分。

.description { 
    float: left; 
    padding: 5px 5px 0 0; 
} 

http://jsfiddle.net/NgfSF/26/

Answer 4

這個怎麼樣：

.description { 
    float: left; 
} 

img { 
    background-color:#FFF; 
    width:40px; 
    height:40px; 
    display:inline-block; 
    border:solid black 1px; 
    float: left; 
} 

Answer 5

更改CSS這一點，

.description { 
    float: left; 
} 

.description1 { 
} 

img { 
    background-color:#FFF; 
    width:40px; 
    height:40px; 
    display:inline-block; 
    border:solid black 1px; 
    float: left; 
} 

http://jsfiddle.net/NgfSF/29/