[英]How to fix the size of a table so that on resizing the browser page the cells don't squeeze?
[英]How to keep the size of images and table's cells relative on browser resizing
我有一些圖像和表格的棋盤游戲。
當我使用Chrome時,顯示器正常,但在其他瀏覽器,例如IE或其他具有較小屏幕的計算機上,則顯示屏正在中斷。
當我嘗試調整瀏覽器大小時,我發現了這個問題。
在將瀏覽器調整為左側之前:
將瀏覽器調整為左側后:
我找到了關於這個問題的帖子,他們建議使用:
margin-left: 10%;
margin-right: 10%;
到圖片但它沒有幫助。
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>
你正在使用position: fixed;
即使您向下滾動頁面,它也會將table
和img
從文檔流中取出並在屏幕上的相同位置顯示; 這意味着他們不知道他們中任何一個占據的空間。
如果您不需要fixed
元素,我建議您重新排列HTML中的順序並將其浮動:
table { float: left; } td { border: 1px solid black; height: 90px; margin-left: 10%; margin-right: 10%; position: relative; text-align: left; vertical-align: top; width: 105px; } #dice { float: left; }
<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> <img id="dice" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAMAAAC5dNAvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PkzLcF4AAAAzUExURR8fH7+/vz8/P19fX8/Pzw8PD39/f5+fny8vL6+vr+/v79/f34+Pj29vb09PTwAAAP///0v689cAAAI+SURBVHja7JjXjsQgDEUNpqby/1+7ZDaFlgAB7cNq/DLSyDqhGF/bYHbTqNaXplAfFPj9kQCCDOaVDUQASBengJgmI6AuHEfTbMgPHJemg0n+i1NouhiqDSfBdDJ7H2Bab8G9DwPaXdwwfYKPFh2mpJ+gm674sjAULv6ITGA5GLt8z+0JBHXtVTqRzjM8xh3nYzNEwXqulXkvh49PtJF7zvu3hxXW04X6L/ExfND3pfvfDo6FL/theWPoyyKcCF2me9wU+ooIR29cUhZ9muZx9B5HX+Dme9ycx80tZzdHOH1zW8kgDn11hDNQfHTRyUAcd+HyHl8ZSy7Ow/mnl0kqMnlpHs454Xy+lzxxZz7OjPhx4jjm013KN8BtSYYQVpp+mXX2/ohxTfbFxUGx2Evki+yCY2elplg7ztWsnL7lcb5mPetbAY5W5Jk8bqzQtwLcVJGjC3BLiFuacDX69vc4USHmBTh9o1lv4w7SmvUWR3wcaX2zc2GhUZpRpsIYLs13bK81kfVJn7YptFbQUH6lpx9OL/YVABZ1fQQ330Xf4i7NotmaZ6QJffNwNZqV9nVxvmbBY5gNkNS3tz3ZXN+TPSxveNGTycLK+F/0ZNjUk2HLZjHCyZaeTMZxxys0K9A3ngjjqUKzSLoOWp3Bh396oqI6wDO63bGMe2Eil1FEQi2J8oZGhuzRshT0UWyv1ei1HoH+SMumFS2Kh6ADEUK7iXGD9R249R4Hdh5W9h6l9h709h5D9x6Sdxvh/wgwAOIqZ8jWZlkFAAAAAElFTkSuQmCC" number="5" />
JS小提琴: http : //jsfiddle.net/LqwbLwv3/
如果需要保持它們是fixed
並且表是設置寬度(似乎是這種情況),您可以從left
定位img
,這樣它就不會嘗試占用與table
相同的空間:
table { left:9px; position: fixed; top:8px; } td { border: 1px solid black; height: 90px; margin-left: 10%; margin-right: 10%; position: relative; text-align: left; vertical-align: top; width: 105px; } #dice { left: 570px; position:fixed; }
<img id="dice" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAMAAAC5dNAvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PkzLcF4AAAAzUExURR8fH7+/vz8/P19fX8/Pzw8PD39/f5+fny8vL6+vr+/v79/f34+Pj29vb09PTwAAAP///0v689cAAAI+SURBVHja7JjXjsQgDEUNpqby/1+7ZDaFlgAB7cNq/DLSyDqhGF/bYHbTqNaXplAfFPj9kQCCDOaVDUQASBengJgmI6AuHEfTbMgPHJemg0n+i1NouhiqDSfBdDJ7H2Bab8G9DwPaXdwwfYKPFh2mpJ+gm674sjAULv6ITGA5GLt8z+0JBHXtVTqRzjM8xh3nYzNEwXqulXkvh49PtJF7zvu3hxXW04X6L/ExfND3pfvfDo6FL/theWPoyyKcCF2me9wU+ooIR29cUhZ9muZx9B5HX+Dme9ycx80tZzdHOH1zW8kgDn11hDNQfHTRyUAcd+HyHl8ZSy7Ow/mnl0kqMnlpHs454Xy+lzxxZz7OjPhx4jjm013KN8BtSYYQVpp+mXX2/ohxTfbFxUGx2Evki+yCY2elplg7ztWsnL7lcb5mPetbAY5W5Jk8bqzQtwLcVJGjC3BLiFuacDX69vc4USHmBTh9o1lv4w7SmvUWR3wcaX2zc2GhUZpRpsIYLs13bK81kfVJn7YptFbQUH6lpx9OL/YVABZ1fQQ330Xf4i7NotmaZ6QJffNwNZqV9nVxvmbBY5gNkNS3tz3ZXN+TPSxveNGTycLK+F/0ZNjUk2HLZjHCyZaeTMZxxys0K9A3ngjjqUKzSLoOWp3Bh396oqI6wDO63bGMe2Eil1FEQi2J8oZGhuzRshT0UWyv1ei1HoH+SMumFS2Kh6ADEUK7iXGD9R249R4Hdh5W9h6l9h709h5D9x6Sdxvh/wgwAOIqZ8jWZlkFAAAAAElFTkSuQmCC" 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>
JS小提琴: http : //jsfiddle.net/jw8buh20/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.