Non-espace insécable en HTML

Question

Je possède une application Web de bowling qui permet une entrée d’informations détaillée détaillée, image par image. Une des choses qu'il permet est de savoir quelles épingles ont été renversées sur chaque balle. Pour afficher cette information, je la fais ressembler à un rack d’épingles:

o o o o
 o o o
  o o
   o

Les images sont utilisées pour représenter les broches. Donc, pour la rangée arrière, j'ai 4 balises img, puis une balise br. Fonctionne très bien ... surtout. Le problème est dans les petits navigateurs, tels que IEMobile. Dans ce cas, lorsqu'il y a 10 ou 11 colonnes dans une table et qu'il peut y avoir un rack d'épingles dans chaque colonne, IE essaiera de réduire la taille de la colonne pour qu'elle s'adapte à l'écran, et je finirai avec quelque chose comme ceci. :

o o o
  o
o o o
 o o
  o

ou

o o
o o
o o
 o
o o
 o

La structure est la suivante:

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

Il n'y a pas d'espaces à l'intérieur de la div interne. Si vous consultez cette page dans un navigateur Web standard, il devrait afficher bien. Si vous le regardez dans IEMobile, ce n’est pas le cas.

Des astuces ou des suggestions? Peut-être une sorte de & Amp; nbsp; cela n'ajoute pas réellement d'espace?

Suivi / Résumé

J'ai reçu et essayé plusieurs bonnes suggestions, notamment:

• Génère dynamiquement l’ensemble de l’image sur le serveur. Bonne solution, mais ne correspond pas vraiment à mon besoin (hébergé sur GAE), et un peu plus de code que ce que je voudrais écrire. Ces images pourraient également être mises en cache après la première génération.
• Utilisez la déclaration d'espace blanc CSS. Bonne solution basée sur des normes, échoue lamentablement dans la vue IEMobile.

Ce que j'ai fini par faire

accroche la tête et marmonne quelque chose

Oui, c'est vrai, un gif transparent en haut de la div, dimensionné à la largeur dont j'ai besoin. Le code de fin (simplifié) ressemble à:

<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>

Et 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. Non, je ne ferai pas la fusion entre le point clair de quelqu'un d'autre dans ma solution finale:)

Answer 1

Vous pouvez essayer le css & "; maintenant, &"; option dans le div contenant.

{white-space: nowrap;}

Je ne sais pas dans quelle mesure cela est pris en charge.

Answer 2

Par le passé, j’avais déjà résolu ce type de problème en créant dynamiquement l’ensemble de l’image (avec la disposition des broches appropriée) sous la forme d’une seule image. Si vous utilisez ASP.NET, c'est assez facile à faire avec les appels GDI. Vous créez simplement l’image avec le placement des épingles de manière dynamique, puis vous transmettez à la page une image unique. Élimine tous les problèmes d’alignement (jeu de mots voulu).

Answer 3

Pourquoi ne pas avoir une image de tous les résultats possibles pour les épingles? No Messing avec les dispositions pour les navigateurs une image est une image

Générez-les à la volée en mettant en cache les images créées pour les réutiliser.

Answer 4

Ce qui serait le plus logique est de changer l'image affichée à la volée:

<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>

Answer 5

Puisque vous utilisez quand même des images, pourquoi ne pas générer une image représentant toute la mise en page à la volée? Vous pouvez utiliser quelque chose comme GD ou ImageMagick pour faire l'affaire.

Answer 6

Ajouter un " nowrap " dans votre tag td ...

Answer 7

Puisque vous visez une compatibilité maximale, avez-vous envisagé de générer une seule image représentant le cadre?

Si vous utilisez PHP, vous pouvez utiliser GD pour créer de manière dynamique des images représentant les images en fonction de la même entrée que celle utilisée pour créer le code HTML dans votre question. Le principal avantage de cette opération est que tout navigateur pouvant afficher un fichier PNG ou GIF pourrait afficher votre cadre.

Answer 8

C’est là-haut depuis un moment, mais j’étais en train de le parcourir et j’ai trouvé ce post. Peu importe ce que je faisais, je ne pouvais pas obtenir d'images de suite. Quoi qu'il arrive, ils envelopperaient. J'ai tout essayé.

Ensuite, j’ai réalisé qu’il existe un paramètre sur le client qui permet de sélectionner l’affichage comme suit: 1) Colonne unique, 2) Vue du bureau et 3) Ajuster la fenêtre. Selon MSDN, la valeur par défaut est supposée correspondre à la fenêtre. Mais le téléphone IE Mobile de ma femme était par défaut sur Colonne unique. DONC PAS D'ORDRE QUOI, cela encapsulerait tout dans une seule colonne. Si j’ai opté pour l’une des deux autres options, les résultats étaient satisfaisants.

Vous pouvez définir ceci avec une balise META:

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

va définir la largeur de la page à 320px. Je ne sais pas comment le faire passer à l’auto, si quelqu'un le sait, postez-le s'il vous plaît.

Ceci ne fonctionne PAS sur les BlackBerry antérieurs à la v4.6 - vous êtes bloqué avec une seule colonne à moins que l'utilisateur ne passe manuellement à la vue du bureau. Avec la version 4.6 ou ultérieure, les éléments suivants sont supposés fonctionner, mais je n'ai pas encore testé:

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

Answer 9

Vous pourriez avoir besoin d'un espace réel immédiatement après le point-virgule dans & nbsp;

Answer 10

Essayez-le avec la balise <div> sur la même ligne que <td>...</td>

Answer 11

J'ai peut-être mal compris ce que vous cherchez, mais je pense que vous pouvez faire ce que j'ai fait pour logos sur une carte .

La mosaïque d’arrière-plan de la carte est dessinée, puis chaque image doit flotter à gauche et se voir attribuer des marges intéressantes afin d’être positionnées comme je le souhaite (voir la source pour voir comment il se passe).

Answer 12

Utilisez le mot "menuisier", U + 2060 (c.-à-d. ⁠)

.

Answer 13

Peut-être n’est-ce qu’un cas dans lequel vous pourriez utiliser des tableaux pour appliquer la mise en page. Ce n'est pas optimal, et je sais que vous n'êtes pas censé utiliser des tableaux pour des choses qui ne sont pas tabulaires, mais vous pouvez faire quelque chose comme ça.

<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>

Answer 14

Avez-vous essayé de définir une largeur pour la colonne? Comme <td width="123px"> ou <td style="width:123px">. Et peut-être aussi pour le div?

Answer 15

• Il existe le nobr balise html; je ne sais pas si cela est bien pris en charge, cependant.
• Vous pouvez utiliser des css débordement: visibles et des espaces insécables entre vos éléments (images), mais aucun autre espace dans le code HTML pour ces lignes.

Answer 16

Créez des images séparées pour chaque arrangement possible de chaque rangée .

Cela ne nécessiterait que 30 images (16 + 8 + 4 + 2)

Answer 17

Vous pouvez remplacer img par span et utiliser une image d'arrière-plan pour chaque étendue, en fonction d'une classe 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>...

(Personnellement, je pense qu'il est préférable d'avoir 4 lignes avec une balise p au lieu d'une seule div avec br)

En CSS, vous pouvez avoir quelque chose comme ceci:

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);
}

Answer 18

Ne serait-il pas plus facile de le faire comme ça?

<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>

Comment votre CSS gérerait l'alignement?

.container div{
  text-align:center;
}