0

私の失敗した試みは http://jsfiddle.net/NZtc4/にあります

画面サイズに関係なく、次のページを表示する Web アプリ ページを作成しようとしています。

[Toolbar]
[ Image ]
[img][img][img]<-- この行はスクロール可能 <-> (ドラッグ可能)

  • ツールバーは jquery モバイルのものです。
  • 画像は、残りの高さの 67%、幅 100% である必要があります。
  • imgs はページの 50% の幅で、残りの高さである必要があります。(任意の時点で表示される 2 つの全体のイメージに相当します。)
  • 2 を超える任意の数の画像。
    （すべての画像がアンカーになりますが、これは質問の範囲を超えています。）

ページはシームレスである必要があります。つまり、要素間にギャップはありません。

答えは、記載されているページのデモまたは実装の説明です。

4

1 に答える 1

0

要素がinline-block. このギャップを取り除くには、 を追加する必要がありますfont-size:0。副作用として、実際にテキストを含む要素に font-size を指定する必要があります。(それ以外の場合、テキストは表示されません)。font-size:1remCSS3では、font-size を body (ルート) のサイズに設定するために使用できます。

下部スクローラーの場合、指定する必要はありませんwidth。代わりにwhite-space:nowrap、要素が同じ行に表示されるようにする必要があります。

編集された例を参照してください: http://jsfiddle.net/NZtc4/2/

于 2012-05-18T17:03:14.063 に答える