如何強制浮動塊留在CSS的同一行？

Question

所以這是我的演示：http://jsfiddle.net/3c40tafe/1/

我怎樣才能使圖標，文件名和說明在同一行？同時，圖標和標題的寬度需要固定，並且描述段落充滿了休息寬度。

我的代碼：

<div class="item_row"> 
        <div class="result_item_icon"><img src="img/logo/xmas_kitten.png"></div> 
        <div class="result_item_name">12 Kittens of Xmas</div> 
        <div class="search_result_description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
       </div> 

CSS：

.result_item_icon{ 
    display:block; 
    float:left; 
    width:50px; 
    height:100%; 
    text-align: center; 
} 
.result_item_icon img{ 
    max-width:50px; 
    max-height:50px; 
} 

.result_item_name{ 
    display:block; 
    height:50px; 
    width:200px; 
    font-weight:700; 
    vertical-align: middle; 
    float;left 
} 
.search_result_description{ 
    display:block; 
    float:left 
} 

Answer 1

不使用浮動塊，如果你不想讓他們來包裝。

.item_row { 
    display:table; 
} 
.item_row > * { 
    display:table-cell; 
    vertical-align:top; 
} 
/* remove display:block; and float:left; from child elements */ 

http://jsfiddle.net/mblase75/3ambhr3a/

Answer 2

退房：http://jsfiddle.net/3c40tafe/19/。

UI：

<div class="item_row"> 
<div style="float: left;"> 
       <div class="result_item_icon"><img src="img/logo/xmas_kitten.png"></div> 
       <div class="result_item_name">12 Kittens of Xmas</div> 
      </div> 
       <div class="search_result_description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
</div> 

CSS：

.result_item_icon { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
} 

.result_item_icon img { 
    width: 100%; 
    height: 100%; 
} 

.result_item_name { 
    display: inline-block; 
    width: 200px; 
    height: 50px; 
} 

.search_result_description { 
} 

Answer 3

.result_item_icon{ 
    display: inline-block; 
    float:left; 
    max-width: 50px; 
    width: 10%; 
    height:100%; 
    text-align: center; 
} 
.result_item_icon img{ 
    width: 50px; 
    display: inline-block; 
} 

.result_item_name{ 
    display: inline-block; 
    height:50px; 
    max-width: 200px; 
    width: 25%; 
    font-weight:700; 
    vertical-align: middle; 
    float: left; 
} 
.search_result_description{ 
    display: inline-block; 
    float:left; 
    width: 65%; 
} 

http://jsfiddle.net/3c40tafe/26/

添加最大寬度到每一個並給寬度的百分比基於其容器（100％ ）。

也改變了塊內聯塊