Html 当字符长度较长时，为什么会出现在底部？

我正在尝试做出响应性的设计

演示

应该是这样的图像。 主要有左右两部分。
左侧部分固定为300px宽度。
在右边，它可以缩小到300px。 如果它比这窄，右部分应该显示在底部，就像下图一样

• 除非宽度缩小到300px以下，否则右侧部分应保持在右侧
• 如果低于300px，则应显示在底部
• 如果是长文本，则需要在右侧部分的边缘断开

在我的演示中，当角色的长度较长时，它会在底部显示右部分。
它需要休息，从新线开始。它总是试图在一行中显示这一点

我怎样才能在正确的部分显示正确的部分，而该部分的文本需要中断

我想要的输出

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

用这个

.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;
    }

---

谢谢，我试过了。但您的代码将文本的宽度固定为右侧部分的300px长度。它应该是灵活的：（你在JS fiddle上试过了吗？它把一切都搞糟了：（谢谢。我试过你的代码。但是你的代码看起来是正确的，固定宽度300px:（我想让它更灵活，文本必须尽可能宽。然后，如果web浏览器缩小，宽度达到300px以下，则右侧部分应位于底部。

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%;
}

.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;
    }

try this 

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;
   max-width:300px; word-wrap:break-word;
  }