1

このフィドルを見てください

このフィドルでの私の主な関心事は、div#text と img.frame です。レスポンシブ Web サイトを作成しようとしていますが、これが長い間私の問題でした。サイズを縮小しようとしたときに、img をテキストの横で動作させ、同時にレスポンシブにする方法がわかりません。ブラウザ ウィンドウの それが何をするかというと、レスポンシブに動作する前にテキストの下に入ります。これに対する回避策はありますか?

<div id="text">This is some text this is some text this is some text</div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
4

5 に答える 5

1

フロー テキストを使用したレスポンシブ イメージの鍵は、float に依存しています。ただし、重要なのは、テキストではなく、img 要素をフローティングすることです。

まず、テキストの前に img タグを配置し、次のようにマークアップします。

<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>

この順序の重要性は、img が右にフロートされ、クリアされたブロックされた領域の高さが取り除かれ、テキストがその周りを上に流れることです。

次に、フロートをテキストから削除してフロートを作成し、フロートを画像に適用します。また、テキストと img の間にマージンを与えるために、マージンが img に適用され、次のスタイリングが提供されることにも注意してください。

img { max-width: 100%; height: auto; }

#text{ width:100px;}

.frame {
    float:right;
    background: #fff;
    padding: 6px;
    margin-left:10px;
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}

これがjfiddleのデモンストレーションです

于 2014-02-09T23:21:33.313 に答える
1

目標には、em または % を使用し、インライン ブロックを使用する必要があります。
jsfiddle.net/geNuR/ この jsfiddle を見てくださいコードを適切に配置できない理由がわかりません。フォーラムが私たちの国をブロックしたのかもしれません))

</p>

于 2013-01-04T15:00:30.120 に答える
0

As I understand you need an image beside a text, so when you reduce the window size the image and text behavior isn't affected.

You need the following:

  1. Make a container div id=img_container give style width (let's say 400px)
  2. Put your image inside the container and give a style #img_container img{float: left}
  3. Put your text inside a p tag and give style #img_container (p or div) and give style (margin-left: same of your img width) + 10

This is the full example:

<style>
    #img_container {
        width: 400px;
    }
      #img_container.text {
          margin-left: 306px; 
      }
       #img_container img.frame {
           float: left;
       }
</style>
<div id="img_container">

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
</div>
于 2013-01-01T08:25:52.940 に答える
0

にcssを追加することから始めることができmax-width: 60%;ます.frame。完璧ではありませんが、これはあなたが達成しようとしていることと似ていますか? javascript/jQuery を使用すると、より良い結果が得られます。

于 2013-01-04T15:16:46.873 に答える