javascript - 如何在浏览器调整大小时保持图像和表格单元格的大小相对

coder 2023-08-12 原文

我有带有一些图像和表格的棋盘游戏。
当我使用 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 从文档流中取出并将它们显示在同一位置在屏幕上，即使您向下滚动页面；这意味着他们不知道他们中的任何一个占据的空间。

如果您不需要将元素固定，我建议重新排列它们在 HTML 中的顺序并改为 float 它们:

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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJENkNBODk0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJENkNBOEE0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkQ2Q0E4NzQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkQ2Q0E4ODQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/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 fiddle : http://jsfiddle.net/LqwbLwv3/

如果需要保持它们固定并且表格是固定宽度(这似乎是这种情况)，您可以从中定位img left 相反，这样它就不会尝试占用与 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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJENkNBODk0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJENkNBOEE0N0MyMTFFNEI1NzdFRkFBOTIzNTBGNDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkQ2Q0E4NzQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkQ2Q0E4ODQ3QzIxMUU0QjU3N0VGQUE5MjM1MEY0OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/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 fiddle : http://jsfiddle.net/jw8buh20/

关于javascript - 如何在浏览器调整大小时保持图像和表格单元格的大小相对，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26095467/

何在 javascript 34 gt lt html css resize webpage

有关javascript - 如何在浏览器调整大小时保持图像和表格单元格的大小相对的更多相关文章

ruby - 如何在 Ruby 中顺序创建 PI - 2
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
ruby-on-rails - 如何在 ruby 中使用两个参数异步运行 exe？ - 2
exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby中使用两个参数异步运行exe吗？我已经尝试过ruby命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何rubygems会支持我的问题？最佳答案您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除
ruby - 如何在续集中重新加载表模式？ - 2
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2
我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121
ruby-on-rails - 如何在 ruby 交互式 shell 中有多行？ - 2
这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式rubyshell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。最佳答案这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

javascript - 如何在浏览器调整大小时保持图像和表格单元格的大小相对

有关javascript - 如何在浏览器调整大小时保持图像和表格单元格的大小相对的更多相关文章

随机推荐