Question

我正在尝试制作响应式设计。

DEMO http://jsfiddle.net/tbuU8/

应该是这样的形象。左右两个部分主要有2个部分左侧部分以300px宽度固定关于Right部分，它可以缩小（缩小）到300px。如果它比它窄，右侧部分应该显示在底部，就像下面的图像一样。

enter image description here

右侧部分应保持正确，除非宽度缩小至300px以下。
如果它低于300px，则应显示在底部。
如果是长文本

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

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

enter image description here

我想要的输出

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

Answer 2

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

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

2 个答案: