非破壊-非空間のHTML

https://stackoverflow.com/questions/93171

01-07-2019
|

質問

私はボウリングのウェブことができるアプリケーションか詳細なフレームによるフレームの情報を入力します。一つのことが可能で追跡するピンが取り壊されます。表示この情報は、私のように見せるため、ラックのピン:

o o o o
 o o o
  o o
   o

画像を表現するために使用されません。そこで、後列、4imgタグ、brタグです。作品の素晴---す。問題は小さなブラウザなどのIEMobile.この場合もありますが10または11の列は、テーブルがラックのピンの各カラムには、み収縮のカラムサイズに合わせて画面より、いようにす:

o o o
  o
o o o
 o o
  o

または

o o
o o
o o
 o
o o
 o

の構造:

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

がない空白文字の内側のdiv.見ればこのページ通常のブラウザで表示。これを見れば、IEMobileではできません。

他のヒントや提案?もうなんを追加。

フォローアップ概要を以下に示します。

のんたくつかの良い提案を含む:

動的に生成の全体像、サーバーにコピーします。ソリューションが、なんで私のが必要(大GAE)、ビットコードがよい書き出します。これらの画像がキャッシュする最初の世代を得た。
CSSを利用ホワイト-スペース。良い標準溶液に、失敗を誇るIEMobileます。

どって

掛本ものつぶやく---

そう、透明gif最長サイズの幅に合います。終了コード(簡体字)はこちら次のように記述されています。

<table class="game">
    <tr class="analysis leave">
        <!-- ... -->
        <td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
        <!-- ... -->
    </tr>
</table>

CSS:

div.smallpins {
    background: url(/img/lane.gif) repeat;
    text-align: center;
    padding:0;
    white-space: nowrap;
}
div.smallpins img {
    width:1em;
    height:1em;
}
div.smallpins img.spacer {
    width:4.5em;
    height:0px;
}
table.game tr.leave td{
    padding:0;
    margin:0;
}
table.game tr.leave .smallpins {
    min-width:4em;
    white-space: nowrap;
    background: none;
}

p.s.なされることはありませんでhotlinking誰かの明確なドットの私の最終解決:)

解決

きみのcss"nowrapオプションを含有div.

{white-space: nowrap;}

などの広いサポートします。

他のヒント

私の周辺のこの種の問題を動的に作成全体のイメージ（適切なピン配列)として単一のイメージです。ご利用の場合ASP.NETここでも簡単なGDIます。あなただけを動的に作成し、イメージのピン配置して、ページとしてシングルイメージです。の配置問題の写真(punがあります。

してみてはいかがでしょうか画像のすべてについて成果のピン?無ゴレイアウトのためのブラウザ画像はイメージ

操作を行うというテーマのキャッシュを作成した画像を再利用しています。

そろばの意味で考えている画像が表示され、フライ:

<div id="pin-images">
    <img src="fivepins.jpg" />
    <img src="fourpins.jpg" />
    <img src="threepins.jpg" />
    <img src="twopins.jpg" />
    <img src="onepin.jpg" />
</div>

しておりますので画像を用いたものはなぜ発生しない画像を表すの全体レイアウトの?利用できるように GD または ImageMagick いいですよね。

追加"nowrap"おtd><td>タグを...

ていくための最大の互換性のよい考えを生成する単一画像を表す。

使用している場合は、PHPが使用できGD動的に作成画像のフレームに入力するときに使うのHTMLおい問題です。最大の利点を考えるとどうして他のブラウザでの表示、PNG、GIFなが表示されます。

これまでにここにいながら、どうしてそうなっちゃうんですかってことは見つかります。なかったのでのんびり映像を行います。どうもです。てみました。

そしてその設定があるクライアントが選択することが可能にビューとして1)シングルコラム2)デスクトップ、3)ウインドウです。にMSDNは、デフォルトが合わせます。私の妻の家携帯電話のデフォルトを挿入しないようにする。などでラップすべてを挿入しないようにする。まへのお切り替えは、他の2つのオプションに見えた。

も設定することができますmetaタグ:

<meta name="MobileOptimized" content="320">

このページの幅320px.知らない方法で自動れば、誰もが知ってください。

このなブラックベリーの事前のバージョン4.6-んこだわったシングルカラムでない限りユーザーは手動で変更をデスクトップます。と4.6以降、以下のように仕上げたいと思いましたられる

<meta name="viewport" content="width=320">

必要がある場合があります実際の空間を直後のセミコロンで

みのの <div> タグと同じ行 <td>...</td>

いたのですが誤解されかりの楽しさがさらに広がりするかという問題はあろうが、できなかっロゴを地図.

地図の背景タイルを描画して各画像について語るfloatに残された興味深いマージンその位置付けてもらいたいとして使用することができるビューソースしていませんのでご注意くださの。

使用するジョイナーの文字、U+2060年には（ ⁠)

たぶんでいただく場合がテーブルを実施。なに最適な、かんに使用すればいいのテーブルでないものは表形式でなにができるようなものです。

<table>
<tr>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;></td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

いう定義の設定幅は、カラム?のように <td width="123px"> または <td style="width:123px">.とももの部?

あの nobr htmlタグなどなどを紹介していることがあります。
を使用できるcss オーバーフローにおける可視 非破壊空間の要素（画像）ですが、他に空白文字のhtmlれます。

て別々の画像毎に配置 各行の.

うにするためには30画像(16+8+4+2)

交換可能ですimgとの間に利用背景画像の各スパンに応じて、cssのクラス：

<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...

(personnalyと思いやりたい、4線とpタグの代わりに単div br)

のCSSできていて思ったこと。

p.smallpins {
    margin: 0;
    padding: 0;
    height: 11px;
    font-size: 1px;
}
p.smallpins span {
    width: 11px;
    background-image: url(nopinsmall.gif);
    background-repeat: ...
    background-position: ...
}
p.smallpins span.pin {
    background-image: url(pinsmall.gif);
}

になりう場合ではこのような態度を取るのか。

<div id="container">
  <div id="row1">
    <img/><img/><img/><img/>
  </div>
  <div id="row2">
    <img/><img/><img/>
  </div>
  <div id="row3">
    <img/><img/>
  </div>
  <div id="row4">
    <img/>
  </div>
</div>

るCSS務を取り扱うに配?

.container div{
  text-align:center;
}

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow