Nicht brechener Nicht-Raum in HTML
https://stackoverflow.com/questions/93171
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe eine Bowling-Webanwendung, die einen ziemlich detaillierten Informationen zum Bild von Frame-by-Rahmen ermöglicht. Eine Sache, die es zulässt, ist die Verfolgung, welche Stifte auf jeden Ball niedergeschlagen wurden. Um diese Informationen anzuzeigen, sehe ich sie wie ein Stiftepins aus:
o o o o o o o o o o
Bilder werden verwendet, um die Stifte darzustellen. Für die hintere Reihe habe ich also 4 IMG -Tags, dann ein BR -Tag. Funktioniert großartig ... meistens. Das Problem ist in kleinen Browsern wie Iemobile. In diesem Fall, wo es 10 oder 11 Spalten in einer Tabelle befindet und in jeder Spalte ein Stiftepolderstifte vorhanden ist, versucht der IE, die Säulengröße auf den Bildschirm zu verkleinern, und ich habe so etwas wie diese :
o o o o o o o o o o
oder
o o o o o o o o o o
Die Struktur ist:
<tr>
<td>
<!-- some whitespace -->
<div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
<!-- some whitespace -->
</td>
</tr>
Es gibt kein Weiß im inneren Div. Wenn Sie sich ansehen diese Seite In einem normalen Browser sollte es gut angezeigt werden. Wenn Sie es sich in Iemobile ansehen, ist dies nicht der Fall.
Irgendwelche Hinweise oder Vorschläge? Vielleicht fügt eine Art von der Art keinen Raum hinzu?
Followup/Zusammenfassung
Ich habe mehrere gute Vorschläge erhalten und ausprobiert, darunter:
- Generieren Sie das gesamte Bild auf dem Server dynamisch. Gute Lösung, passt aber nicht wirklich zu meinem Bedürfnis (auf GAE gehostet) und etwas mehr Code, als ich gerne schreiben würde. Diese Bilder könnten auch nach der ersten Generation zwischengespeichert werden.
- Verwenden Sie die CSS-Weißraum-Erklärung. Gute standardbasierte Lösung, scheitert kläglich in der Iemobile -Sicht.
Was ich am Ende gemacht habe
Hängt Kopf und murmelt etwas
Ja, das stimmt, ein transparentes GIF oben auf der Div, die auf die Breite geeignet ist, die ich brauche. Endcode (vereinfacht) sieht aus wie:
<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>
Und 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;
}
PS Nein, ich werde nicht den klaren Punkt eines anderen in meiner endgültigen Lösung verdichten :)
Lösung
Sie können die CSS -Option "Nowrap" in der enthaltenden Div -Div -Option ausprobieren.
{white-space: nowrap;}
Ich bin mir nicht sicher, wie weit das unterstützt wird.
Andere Tipps
Ich habe diese Art von Problem in der Vergangenheit umgegangen, indem ich das gesamte Bild dynamisch als ein einzelnes Bild erstellt habe (mit geeignetem Pinanordnung). Wenn Sie ASP.NET verwenden, ist dies mit GDI -Aufrufen ziemlich einfach zu tun. Sie erstellen das Bild nur dynamisch mit Pin -Platzierung und servieren dann der Seite als einzelnes Bild. Nimmt alle Ausrichtungsprobleme aus dem Bild (Wortspiel beabsichtigt).
Warum nicht ein Bild für alle möglichen Ergebnisse für die Stifte haben? Kein Durcheinander mit Layouts für Browser Ein Bild ist ein Bild
Generieren Sie sie im Fliegen, der die erstellten Bilder zur Wiederverwendung zwischenstrichen.
Was den größten Sinn ergeben würde, ist, welches Bild im laufenden Fliegen angezeigt wird:
<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>
Wenn Sie sowieso Bilder verwenden, generieren Sie nicht ein Bild, das das gesamte Layout im laufenden Flug darstellt. Sie können so etwas verwenden Gd oder Imagemagick den Trick machen.
Fügen Sie in Ihrem TD -Tag eine "Nowrap" hinzu ...
Haben Sie darüber nachgedacht, ein einzelnes Bild zu generieren, das den Rahmen darstellt?
Wenn Sie PHP verwenden, können Sie GD verwenden, um Bilder dynamisch zu erstellen, die die Rahmen basierend auf derselben Eingabe darstellen, mit der Sie die HTML in Ihrer Frage erstellen würden. Der größte Vorteil dafür ist, dass jeder Browser, der einen PNG oder GIF anzeigen könnte, Ihren Rahmen anzeigen kann.
Das ist schon eine Weile hier oben, aber ich habe das gerade durchgemacht und diesen Beitrag gefunden. Egal was ich getan habe, ich konnte keine Bilder in eine Reihe lassen. Egal was, sie würden sich wickeln. Ich habe alles versucht.
Dann habe ich herausgefunden, dass auf dem Client eine Einstellung vorhanden ist, in der sie die Ansicht als 1) Einzelspalte, 2) Desktop -Ansicht und 3) Anpassungsfenster auswählen können. Laut MSDN soll der Standard sein, um das Fenster anzupassen. Aber das IE -Handy meiner Frau war der einzelnen Spalte unbehaglich. Egal was passiert, es würde alles in eine einzelne Spalte einpacken. Wenn ich zu einer der anderen beiden Optionen wechselte, sah es gut aus.
Nun, Sie können dies mit einem Meta -Tag einstellen:
<meta name="MobileOptimized" content="320">
Set die Seitenbreite auf 320px. Ich weiß nicht, wie man es zum Auto geht, wenn jemand da draußen weiß, bitte posten.
Dies funktioniert nicht bei Blackberry's vor V4.6 - Sie stecken mit einer Spalte fest, es sei denn, der Benutzer ändert sich manuell in der Desktop -Ansicht. Mit 4.6 oder später soll das Folgende funktionieren, aber ich habe nicht getestet:
<meta name="viewport" content="width=320">
Möglicherweise benötigen Sie einen tatsächlichen Raum unmittelbar nach dem Halbkolon in
Versuchen Sie es mit dem <div> Tag auf der gleichen Zeile wie <td>...</td>
Ich habe vielleicht missverstanden, wonach Sie suchen, aber ich denke, dass Sie das tun können, was ich getan habe Für Logos auf einer Karte.
Die Kartenhintergrundkachel wird gezeichnet, dann wird jedes Bild aufgefordert, links zu schweben und einige interessante Ränder zu geben, damit sie so positioniert sind, wie ich es möchte (Quelle anzeigen, um zu sehen, wie es gemacht wird).
Verwenden Sie das Wort Joiner -Zeichen U+2060 (dh ⁠)
Vielleicht ist dies nur ein Fall, in dem Sie Tabellen verwenden können, um das Layout durchzusetzen. Es ist nicht optimal und ich weiß, dass Sie keine Tabellen für Dinge verwenden sollten, die nicht tabellarisch sind, aber Sie könnten so etwas tun.
<table>
<tr>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> ></td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Haben Sie versucht, eine Breite für die Spalte zu definieren? Wie <td width="123px"> oder <td style="width:123px">. Und vielleicht auch für die Div?
- Da ist das nobr HTML -Tag; Ich bin mir jedoch nicht sicher, wie gut das ist.
- Sie könnten CSS verwenden Überlauf: sichtbar und nicht sprechende Räume zwischen Ihren Elementen (Bildern), aber kein anderes Weiß in der HTML für diese Zeilen.
Haben separate Bilder für jede mögliche Anordnung von jeder Reihe.
Das würde nur 30 Bilder erfordern (16+8+4+2)
Sie können IMG durch Spannweite ersetzen und je nach CSS -Klasse ein Hintergrundbild verwenden:
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
(Personnaly, ich denke, es ist besser, 4 Zeilen mit AP -Tag anstelle eines einzelnen Divs mit BR zu haben)
In CSS können Sie so etwas haben:
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);
}
Wäre es nicht einfacher, wenn Sie es so tun?
<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>
Wo würden Ihr CSS mit der Ausrichtung übernehmen?
.container div{
text-align:center;
}
