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 poi Su '# dice 'prendi la' posizione: fissa; ' Oppure renderlo 'position: absolute;' Il dado sta impostando 230px dal bordo del browser. – chaos505
E un altro pellegrino si imbarca nel lungo viaggio per trovare la reattività. – Winchestro
Forse impostare un jsfiddle? – fraxture