0

私はHTML5Jquery Mobile を使用してモバイルアプリを構築しています。私がやろうとしているのは、右側に 1 つ、左側にもう 1 つの 2 つの画像を表示することです。ウィンドウブラウザのサイズを変更する際に重要なことは、画像が消えてはならず、常に右側に 1 つ、左側に 1 つ表示されるようにすることです。これにより、さまざまなモバイル画面に適合します。

私はCSSを使用しようとしました： float:right、left:85%...

しかし、サイズを変更した後、それは消えます....

4

2 に答える 2

0

コードを見ないと、何を試したのかわかりません。ただし、次を使用してこれを実現できます。

<div style="position:fixed;left:0;"><img src="fakeimageurl.jpg" width="100" /></div>
<div style="position:fixed;right:0;"><img src="fakeimageurl.jpg" width="100" /></div>

または、スクロールで画像が動かないようにしたい場合...

<div style="position:absolute;left:0;"><img src="fakeimageurl.jpg" width="100" /></div>
<div style="position:absolute;right:0;"><img src="fakeimageurl.jpg" width="100" /></div>
于 2013-01-08T20:29:09.820 に答える
0

開始するための例を次に示します。ブラウザのサイズを変更してみてください。

before背景画像のマークアップを作成するには、擬似とセレクターを使用することをお勧めしafterます。これは、意味的にページに表示したいものではないためです。

基本的なマークアップ:

<div id="main">
    Page content
</div>

基本的な CSS:

#main { position: relative; z-index: 1 }
#main:before { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; left: 0; right: 50%;  }
#main:after { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; right: 0; left: 50%; }

,は要素をターゲット コンテナーの高さいっぱいまで伸ばします ( top:0)一方で、//は適切な半分を占めます。bottom:0#mainleftright 050%

次に、背景画像をオンにして定義を設定しbeforeますafter。背景画像をスケーリングするためにも利用できますbackground-sizeが、これは必要ない場合があります。

于 2013-01-08T20:30:42.910 に答える