Question

我遇到的问题是我在不同的div上分别制作了一张桌子和一些箭头。但是，如果我更改浏览器或放大页面，那些div就无法移动并变得更大或更小同时。

目前我正在做的是建造一张大桌子。在这个大表内，有许多小表：对于每一行的块，它是一个表，所以有多少行有多少个表。箭头在一个新的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>&larr;<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>

Answer 1

我相信你的问题可能是“或者我认为”你可能需要使用百分号，％。我知道在创建HTML的第一天左右，我学到了％比PX更好的方法，因为如果你换成不同的分辨率，就会出现类似于你所说的问题。因此，请尝试在您的网页上使用1-100％。我相信它可以扩展，并且与您当前的屏幕相关。无论如何，请尝试。在我没有解释的情况下：通过使用百分比，你可以实现一些能够做到这样的事情： <div id="EXAMPLE" style="height:1%;length:100%;"></div> 这将有效地使DIV元素拉伸整个页面并占据屏幕相对高度的1％，从页面顶部开始。这适用于定位，以及可以使用“PX”的任何其他地方，还有“EM”和其他方法，但我个人使用％。就是这样。

Answer 2

我不确定你在使用.NetMarginArrow css类的代码中。此外，css区分大小写。在您的代码中，＆＃39; p＆＃39;是.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>&larr;<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元素的包装器。

Answer 3

将所有固定保留在他们的位置 div { position：fixed; }
并使用
#someid {位置：相对; }在各个地方出现箭头

html5：如何在更改浏览器时对齐多个div而不会移开

3 个答案: