html - 如何强制 float block 留在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

如果您不想让它们换行，请不要使用 float block 。在我看来你想要类似表格的行为:

.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/