如果内容太宽，则内联块从浮动中清除

Question

我正在尝试制作如下的消息模板。

<div class='message'>
    <div class='from'>
        <i class='avatar'></i>
        <span>Name</span>
    </div>
    <div class='body'>
        <div class='content'>Hello</div>
    </div>
</div>

.message { clear: both; }    
.from {  
    float: left;
    margin-right: 12px;
}
.from > i {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #000;
}
.from > span {
    display: block;
    width: $avatar-width;
    line-height: 1em;
}
.body {
    position: relative;
}
.body > .content {
    display: inline-block;
    padding: 15px;
    border: 3px solid #000;
    overflow: hidden;
}

我很难让内容和div.from保持同一条线。当内容太宽时，内容将转到新行。请参阅http://jsfiddle.net/9h3HN/1/了解我的意思。

有什么想法吗？感谢。

Answer 1

你有没有试过？

.form {
    width: 54px;
}
.body {
    padding-left: 70px;
}