html - 为什么当字符长度很长时，它会出现在底部？

Question

我正在尝试进行响应式设计。

演示 http://jsfiddle.net/tbuU8/

它应该像这张图片。主要有左右两部分。
左侧部分固定为 300px 宽度。
关于右侧部分，它可以缩小(缩小)到 300px。如果比这更窄，则右侧部分应显示在底部，如下图所示。

• 右侧部分应保持在右侧，除非宽度缩小到 300 像素以下。
• 当它小于 300px 时，它应该显示在底部。
• 如果是长文本，需要在右边部分的边缘打断

在我的演示中，当字符长度较长时，它会在底部显示右侧部分。
它需要中断并从新行开始。它总是尝试在 1 行中显示。

如何在右侧部分显示正确的部分，并且其中的文本需要中断。

我想要的输出

July 22, 2013 11:34   Helloooooooooooooooooooooooooooooooooooooooooooooo     <= need break!
    John Smith        ooooooooooooooooooo!
      Avatar

HTML

<div class="Row">
    <div class="Box">
        <div class="Left">  
            <div class="posted_at">July 22, 2013 11:34</div>
            <div class="user">John Smith</div>
            <div class="avatar">avatar</div>
        </div>
    </div>


    <div class="Box">
        <div class="Right">
            <div class="body">Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
            <div class="image"></div>
        </div>
    </div>
</div>

CSS

div.Row{
    border:1px solid rgb(0, 0, 0);
    min-width: 300px;
    width: 100%;
    background-color:#ffffff;
    margin-bottom: 20px;
    margin-right: 20px;
    float:left;
    display:block;  
}

div.Box{
    padding:0px;
    text-align:center;
    float:left;
    }

div.Left{
    width:300px;
    padding-top:5px;
    padding-bottom:15px;
    text-align:center;
    color:#000000;
    clear:both;
}

div.LeftImage{
    margin: 15px 15px 15px 15px;
}

div.Right{
    padding-top:15px;
    padding-right:10px;
    text-align:left;
    color:#000000;
    clear:both;
    min-width: 300px;
    word-break: break-all;

}

div.posted_at{
    padding:5px;
}

div.icon{
    display:inline-block;
    padding: 10px;
}

div.icon img{
    width:100%;
    height:100%;
}

Answer 1

使用这个

.Row{
    border:1px solid rgb(0, 0, 0);
    width: 300px;
    background-color:#ffffff;
    margin-bottom: 20px;
    margin-right: 20px;
    float:left;
    display:block;  
}

.Box{
    width:700px;
    padding:0px;
    text-align:center;
    float:right;
    }