我遇到的问题是我制作了一个表格，并在不同的 div 上分别制作了一些箭头。但是如果我更改浏览器或放大页面，这些 div 不能移动并同时变大或变小。
目前我正在做的是构建一个大表。在这个大表里面，还有很多小表:每一行的 block ，就是一个表，多少行就有多少表。箭头在一个新的 div 中，它的位置是“绝对的”，我改变左/上位置来调整它的位置。
谁能建议我如何解决这个问题，在此先感谢。
<html>
<head>
<title>Dupont Model</title>
<style type="text/css">
.table { //for tables
position: absolute;
width: 633px;
height: 309px;
left: 0px;
top: -35px;
}
.NetMarginArrow {
Position: absolute;
width: 180px;
height: 115px;
left: 428px;
top: 166px;
}
<------each arrow is asigned with a div class--->
</style>
</head>
<body>
<h3> Model</h3>
<div class="table"> <!--for tables (each block)-->
<table style border="0" cellpadding="0">
<!---a big table contains many small tables---->
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{net_profit}}</td>
<tr><tr><tr>
</tr>
<tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr>
<tr>
<td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td>
<tr><tr><tr>
</tr>
</td></table>
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{gross_margin}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{tax}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{total_expenses}}</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><tr>
</td></table>
</table>
</div>
<!----each arrow has a div---->
<div class="NetMartinArrow">
<td><table border="0" cellpadding="0"> <!--Arrow after Net profit-->
<td>←<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table>
</td></table>
</div>
............................same to all arrows.............
</body>
</html>
最佳答案
我不确定您在代码中的什么地方使用了 .NetMarginArrow CSS 类。此外，css 区分大小写。在您的代码中，“p”是 .NetMarginArrow 类中头寸的首字母。 确保 html 正文占据 100% 的高度。容器充当所有元素的包装器。 请尝试下面的代码。
<html>
<head>
<title>Dupont Model</title>
<style type="text/css">
html, body {
height: 100%;
}
#container {
position: relative;
}
.table { //for tables
position: absolute;
width: 633px;
height: 309px;
left: 0px;
top: -35px;
}
.NetMarginArrow {
position: absolute;
width: 180px;
height: 115px;
left: 428px;
top: 166px;
}
<------each arrow is asigned with a div class--->
</style>
</head>
<body>
<h3> Model</h3>
<div id="container">
<div class="table"> <!--for tables (each block)-->
<table style border="0" cellpadding="0">
<!---a big table contains many small tables---->
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{net_profit}}</td>
<tr><tr><tr>
</tr>
<tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr>
<tr>
<td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td>
<tr><tr><tr>
</tr>
</td></table>
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{gross_margin}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{tax}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{total_expenses}}</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><tr>
</td></table>
</table>
</div>
</div>
<!----each arrow has a div---->
<div class="NetMartinArror">
<td><table border="0" cellpadding="0"> <!--Arrow after Net profit-->
<td>←<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table>
</td></table>
</div>
............................same to all arrows.............
</body>
</html>
我添加了容器作为所有 HTML 元素的包装器。
关于javascript - html5 :how to align multiple div without shifting away when changing browser，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33080782/