Non-spazio unificatore in HTML
https://stackoverflow.com/questions/93171
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho un'applicazione web di bowling che consente l'immissione di informazioni abbastanza dettagliate fotogramma per fotogramma.Una cosa che consente è tenere traccia di quali birilli sono stati abbattuti su ciascuna pallina.Per visualizzare queste informazioni, le faccio sembrare una serie di spilli:
o o o o o o o o o o
Le immagini vengono utilizzate per rappresentare i perni.Quindi, per l'ultima fila, ho 4 tag img, quindi un tag br.Funziona alla grande...soprattutto.Il problema è nei browser piccoli, come IEMobile.In questo caso, dove ci sono 10 o 11 colonne in una tabella e potrebbe esserci un rack di pin in ciascuna colonna, IE proverà a ridurre la dimensione della colonna per adattarla allo schermo e alla fine otterrò qualcosa di simile a questo :
o o o o o o o o o o
O
o o o o o o o o o o
La struttura è:
<tr>
<td>
<!-- some whitespace -->
<div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
<!-- some whitespace -->
</td>
</tr>
Non ci sono spazi bianchi all'interno del div interno.Se guardi questa pagina in un browser normale, dovrebbe essere visualizzato correttamente.Se lo guardi in IEMobile, non è così.
Qualche suggerimento o suggerimento?Forse una specie diquesto in realtà non aggiunge uno spazio?
Seguito/Riepilogo
Ho ricevuto e provato diversi buoni suggerimenti, tra cui:
- Genera dinamicamente l'intera immagine sul server.Buona soluzione, ma non soddisfa pienamente le mie esigenze (ospitato su GAE) e un po' più di codice di quello che vorrei scrivere.Queste immagini potrebbero anche essere memorizzate nella cache dopo la prima generazione.
- Utilizza la dichiarazione degli spazi bianchi CSS.Soluzione basata su buoni standard, fallisce miseramente dal punto di vista IEMobile.
Quello che ho finito per fare
china la testa e borbotta qualcosa
Sì, esatto, una gif trasparente nella parte superiore del div, dimensionata in base alla larghezza di cui ho bisogno.Il codice finale (semplificato) è simile a:
<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>
E 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.No, non collegherò a caldo il punto chiaro di qualcun altro nella mia soluzione finale :)
Soluzione
Potresti provare l'opzione css "nowrap" nel div contenente.
{white-space: nowrap;}
Non sono sicuro di quanto sia ampiamente supportato.
Altri suggerimenti
In passato ho risolto questo tipo di problema creando dinamicamente l'intera immagine (con la disposizione dei pin appropriata) come una singola immagine.Se si utilizza ASP.NET, l'operazione è abbastanza semplice con le chiamate GDI.Devi semplicemente creare dinamicamente l'immagine con il posizionamento del segnaposto, quindi pubblicarla sulla pagina come una singola immagine.Elimina tutti i problemi di allineamento dall'immagine (gioco di parole).
Perché non avere un'immagine per tutti i possibili risultati per i birilli?Nessun problema con i layout dei browser: un'immagine è un'immagine
Generali al volo memorizzando nella cache le immagini create per il riutilizzo.
Ciò che avrebbe più senso è cambiare al volo l'immagine visualizzata:
<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>
Dato che stai comunque utilizzando immagini, perché non generare al volo un'immagine che rappresenti l'intero layout?Puoi usare qualcosa del genere GD O ImageMagick per fare il trucco.
Aggiungi un "nowrap" nel tuo tag td...
Dato che stai cercando la massima compatibilità, hai considerato di generare una singola immagine che rappresenta la cornice?
Se utilizzi PHP puoi utilizzare GD per creare dinamicamente immagini che rappresentano i frame in base allo stesso input che utilizzeresti per creare l'HTML nella tua domanda.Il più grande vantaggio di farlo è che qualsiasi browser in grado di visualizzare PNG o GIF sarà in grado di visualizzare il frame.
È da un po' che è qui, ma lo stavo sfogliando e ho trovato questo post.Qualunque cosa facessi, non riuscivo a mettere le immagini in fila.Non importa cosa, si avvolgerebbero.Ho provato di tutto.
Quindi ho scoperto che esiste un'impostazione sul client in cui è possibile selezionare la visualizzazione come 1) Colonna singola, 2) Visualizzazione desktop e 3) Adatta finestra.Secondo MSDN, l'impostazione predefinita dovrebbe essere adatta a window.Ma il telefono IE Mobile di mia moglie era impostato su Colonna singola per impostazione predefinita.QUINDI NON IMPORTA COSA, avvolgerebbe tutto in un'unica colonna.Se passavo a una qualsiasi delle altre 2 opzioni sembrava a posto.
Bene, puoi impostarlo con un meta tag:
<meta name="MobileOptimized" content="320">
imposterà la larghezza della pagina su 320px.Non so come farlo andare in automatico, se qualcuno là fuori lo sa, per favore posta.
Questo NON funziona sui Blackberry precedenti alla versione 4.6: sei bloccato con una singola colonna a meno che l'utente non passi manualmente alla visualizzazione desktop.Con la versione 4.6 o successiva, dovrebbe funzionare quanto segue ma non ho testato:
<meta name="viewport" content="width=320">
Potrebbe essere necessario uno spazio effettivo immediatamente successivo al punto e virgola
Provalo con <div> tag sulla stessa riga di <td>...</td>
Potrei aver frainteso ciò che cerchi, ma penso che tu possa fare quello che ho fatto io per i loghi su una mappa.
Viene disegnata la tessera di sfondo della mappa, quindi a ciascuna immagine viene detto di fluttuare a sinistra e vengono dati alcuni margini interessanti in modo che siano posizionati come voglio che siano (visualizza sorgente per vedere come è fatto).
Utilizzare il carattere di unione delle parole, U+2060 (ad es. ⁠)
Forse questo è solo un caso in cui potresti utilizzare le tabelle per imporre il layout.Non è ottimale e so che non dovresti usare le tabelle per cose che non sono tabulari, ma potresti fare qualcosa del genere.
<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>
Hai provato a definire una larghezza per la colonna?Come <td width="123px"> O <td style="width:123px">.E forse anche per il div?
- C'è il nobr tag html;non sono sicuro di quanto sia ben supportato, però.
- Potresti usare i CSS traboccamento:visibile e spazi unificatori tra i tuoi elementi (immagini), ma nessun altro spazio bianco nell'HTML per quelle righe.
Avere immagini separate per ogni possibile disposizione di ogni riga.
Ciò richiederebbe solo 30 immagini (16+8+4+2)
Puoi sostituire img con span e utilizzare un'immagine di sfondo con ogni span, a seconda della classe css:
<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>...
(personalmente penso che sia meglio avere 4 righe con un tag p invece di un singolo div con br)
Nel CSS puoi avere qualcosa del genere:
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);
}
Non sarebbe più semplice se lo facessi in questo modo?
<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>
In che modo il tuo CSS gestirà l'allineamento?
.container div{
text-align:center;
}
