5
Ho un gioco da tavolo con qualche immagine e tabella.
Il display è a posto quando lavoro con Chrome ma su altri browser, come IE o altri computer con schermo più piccolo, quindi il display viene interrotto.
Quando ho provato a ridimensionare il mio browser ho trovato anche questo problema.Come mantenere la dimensione delle immagini e le celle della tabella relative al ridimensionamento del browser
Prima di ridimensionare il browser a sinistra:
Dopo il ridimensionamento del browser a sinistra:
ho trovato messaggi su questo tema e ci hanno suggerito di utilizzare:
margin-left: 10%;
margin-right: 10%;
per le foto ma non ha aiutato.
CSS:
td {
width: 105px;
height: 90px;
text-align: left;
vertical-align: top;
border: 1px solid black;
position: relative;
margin-left: 10%;
margin-right: 10%;
}
table
{
position: fixed;
left:9px;
top:8px;
}
#dice
{
right: 230px;
position:fixed;
margin-left: 10%;
margin-right: 10%;
}
HTML:
<img id="dice" src="Resources/images/dice_5.png" number="5">
<table oncontextmenu="return false">
<tbody>
<tr>
<td class="" cellnumber="1" row="0" col="0"><span>1</span></td>
<td class="" cellnumber="2" row="0" col="1"><span>2</span></td>
<td class="" cellnumber="3" row="0" col="2"><span>3</span></td>
<td class="" cellnumber="4" row="0" col="3"><span>4</span></td>
<td class="" cellnumber="5" row="0" col="4"><span>5</span></td>
</tr>
</tbody>
</table>
Se si desidera mantenere il dado in quel punto poi prova a metterlo nel suo '
E un altro pellegrino si imbarca nel lungo viaggio per trovare la reattività. – Winchestro
Forse impostare un jsfiddle? – fraxture
risposta
Stai usando
position: fixed;
che prende iltable
eimg
fuori del flusso dei documenti e li visualizza nello stesso luogo il lo schermo anche se scorri verso il basso la pagina; questo significa che non sono consapevoli dello spazio occupato da nessuno di loro.Se non è necessario gli elementi per essere
fixed
vorrei suggerire riorganizzare il loro ordine in HTML e li flottante, invece:JS Fiddle:http://jsfiddle.net/LqwbLwv3/
Se è necessario tenerli
fixed
e la tabella è una larghezza impostata (che sembra essere il caso) è possibile ioneimg
da invece laleft
, in questo modo non tenterà di occupare lo stesso spazio deltable
:JS Fiddle:http://jsfiddle.net/jw8buh20/
fonte
2014-09-29 10:31:27
Problemi correlati