0

レスポンシブデザインに挑戦しています。

デモhttp://jsfiddle.net/tbuU8/

この画像のようなものになるはずです。主にLeftとRightの2セクションがあります。
左のセクションは 300px 幅で固定されています。
右部分については、300pxまで縮小（縮小）できます。それよりも狭い場合は、下の画像のように右側のセクションが下に表示されます。

ここに画像の説明を入力

  • 幅が 300px 未満に狭められない限り、右側のセクションは右側のままにする必要があります。
  • 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%;
}
4

2 に答える 2

1 
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;
  }
于 2013-01-24T05:59:59.500 に答える
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;
    }
于 2013-01-24T04:19:45.047 に答える