0

レスポンシブデザインに挑戦しています。画面が小さい場合、コメントは「Slikica」(シアン DIV) の下にある必要があります。しかし、デスクトップ版を使用しているときは、コメント (灰色の div) を画像の周りに歪ませたいと思っています。

  • シアンの div は固定幅で、左にフロートします。
  • グレーの div の長さは不明 (最大 200 文字) であり、シアンの div のすぐ近くにある必要があります。それらも左に浮かんでいます。
  • たとえば幅を 300px に設定すると、すべて正常に動作します。

何千もの言葉に値する下の画像を見てください。

問題を表示しています

<div id="content">
    <div id="slikica">Slikica</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div>
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div>
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div>
    <br class="clrfix" />
</div>

jsFiddle リンク

4

4 に答える 4

2

float: left;コメント DIVの を削除するだけです。残された各コメントを前のコメントにフローティングすると、ビューポートに収まりません。

http://jsfiddle.net/feeela/Xtuc9/1/

于 2012-05-04T14:19:20.770 に答える
1

div次の CSS をコメントの要素に追加してみてください。

display:inline;
于 2012-05-04T14:04:11.860 に答える
0

グレーの div から削除float: left;し、シアンの div 幅と同じ (またはそれより大きい) 左マージンを追加すると、右側のスペースが占有されます。ただし、グレーの div がさらにある場合は、マージンのためにシアンの div をラップしません。この動作が必要かどうかはわかりません。それ以外の場合は、マージンとフローティングの両方をスキップして、シアンの div をラップすることができます。

于 2012-05-04T14:20:34.560 に答える
-1

問題は、div がコンテナの最大幅 (この場合は ) に達するまで拡張されること<div id="content">です。幅が大きすぎて青を脇に収められなくなると、クリップダウンします。必要なのは、それらがその幅に達するのを防ぐものを置くことです.

これを行うには 2 つのオプションがあります。

  1. a width: 600px(またはそのスペースに収まるもの) を含む div を配置し、その中にすべての灰色の div を配置します。JSFiddle (結果ウィンドウを展開して、機能することを確認する必要があります)
  2. max-widthすべての div にaを付けます (例: max-width: 600px)
于 2012-05-04T14:08:03.327 に答える