我试图将网页上的元素翻译到页面顶部。我可以让它向上移动x个像素,但是屏幕尺寸不同,不能正确缩放,因此,我正在寻找更相对的解决方案。
到目前为止我所拥有的是:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" id="checkdiv1" checked> Division 1</label>
<label><input type="checkbox" class="div1 show" value="d1" checked> Team 1</label>
<label><input type="checkbox" class="div1 show" value="d2" checked > Team 2</label>
<label><input type="checkbox" class="div1 show" value="d3" checked> Team 3</label></div>
<div>
<label><input type="checkbox" id="checkdiv2" checked> Division 2</label>
<label><input type="checkbox" class="div2 show" value="r1" checked> Team 1</label>
<label><input type="checkbox" class="div2 show" value="r2" checked > Team 2</label>
<label><input type="checkbox" class="div2 show" value="r3" checked> Team 3</label></div>
<br>
<hr>
<br>
<table border="1">
<tbody>
<tr>
<td></td>
<td >Teams</td>
<td>Points For</td>
<td>Points Against</td>
</tr>
<tr class="d1">
<td><button class="hideRow" checkBoxValue="d1">Hide</button></td>
<td>Division 1 Team 1</td>
<td>280</td>
<td>100</td>
</tr>
<tr class="d2">
<td><button class="hideRow" checkBoxValue="d2">Hide</button></td>
<td>Division 1 Team 2</td>
<td>225</td>
<td>150</td>
</tr>
<tr class="d3">
<td><button class="hideRow" checkBoxValue="d3">Hide</button></td>
<td>Division 1 Team 3</td>
<td>187</td>
<td>223</td>
</tr>
<tr class="r1">
<td><button class="hideRow" checkBoxValue="r1">Hide</button></td>
<td>Division 2 Team 1</td>
<td>330</td>
<td>185</td>
</tr>
<tr class="r2">
<td><button class="hideRow" checkBoxValue="r2">Hide</button></td>
<td>Division 2 Team 2</td>
<td>267</td>
<td>225</td>
</tr>
<tr class="r3">
<td><button class="hideRow" checkBoxValue="r3">Hide</button></td>
<td>Division 2 Team 3</td>
<td>223</td>
<td>150</td>
</tr>
</tbody>
</table>
但就像我之前说过的那样,这并不适用于手机,因为它没有正确缩放。我已经坚持了几个小时,所以我们非常感谢所有的帮助!