Fatal编程技术网
  • javascript/
  • Javascript html5：如何在更改浏览器时对齐多个div而不移动

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

javascript html css

Javascript html5：如何在更改浏览器时对齐多个div而不移动,javascript,html,css,Javascript,Html,Css,我的问题是，我制作了一个表格，并在不同的div上分别设置了一些箭头。但是如果我更改浏览器或放大页面，这些div不能同时移动和变大或变小 目前我正在做的是构建一个大表。在这个大表中，有许多小表：对于块的每一行，它是一个表，所以有多少行就有多少个表。箭头位于新的div中，其位置为“绝对”，我更改左/顶部位置以调整其位置 谁能建议我如何解决这个问题，提前谢谢 <html> <head> <title>Dupont Model</title> <st

我的问题是，我制作了一个表格，并在不同的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>


杜邦模型
.table{//for tables
位置：绝对位置；
宽度：633px；
高度：309px；
左：0px；
顶部：-35px；
}
NetMarginArrow先生{
位置：绝对位置；
宽度：180px；
高度：115px；
左：428px；
顶部：166px；
}
模型
净利润
{{净利润}
销售额
{{sales.sales{u sum}
毛利率
{{毛利率}
税
{{tax}
总费用
{{总费用}
&larr；
与所有箭头相同。。。。。。。。。。。。。
我认为您的问题可能是“或者我认为”您可能需要使用百分号（%）。我知道，在我创建HTML的第一天左右，我以一种艰难的方式学到了%比PX更好，因为如果换成不同的分辨率，就会出现与您所说的类似的问题。所以试着在你的页面上使用1-100%。我相信它使它具有可扩展性，并且与您当前的屏幕相关。无论如何，一定要试试。在这种情况下，我有点低估了：通过使用百分比，您可以实现以下目标：
这将有效地使DIV元素从页面顶部开始拉伸整个页面并占据屏幕相对高度的1%。这适用于定位，任何其他可能使用“PX”的地方，也有“EM”和其他方法，但我个人使用%。仅此而已。

我不确定您在代码中的何处使用了.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>&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，正文{
身高：100%；
}
#容器{
位置：相对位置；
} 
.table{//for tables
位置：绝对位置；
宽度：633px；
高度：309px；
左：0px；
顶部：-35px；
}
NetMarginArrow先生{
位置：绝对位置；
宽度：180px；
高度：115px；
左：428px；
顶部：166px；
}
模型
净利润
{{净利润}
销售额
{{sales.sales{u sum}
毛利率
{{毛利率}
税
{{tax}
总费用
{{总费用}
&larr；
与所有箭头相同。。。。。。。。。。。。。
我已经添加了容器作为所有HTML元素的包装器

将所有东西固定在它们的位置上。
div{位置：固定；}

并使用
#someid{位置：相对；}来显示各个位置的箭头

这可能是由于您使用了
位置：绝对。请您提供一个可复制的示例，您提供的代码并不能真正帮助演示您的问题。此外，您的HTML有错误。缺少起始标签；结束标签在错误的地方等。如果你纠正这些，问题是否仍然存在？我已经把整个代码放在上面了。我检查是否删除位置：绝对，这将不是我想要的东西。谢谢你张贴代码。不幸的是，正如@MrLister所说，您的代码中有很多语法错误，这些错误a）使得很难调查问题，b）实际上可能是导致问题的原因。我建议你先看看这些。例如，您的标签被关闭在错误的位置（
资产周转率
-
应该在
之前），缺少开始标签（
-无
），以及没有目的的随机标签（
-
是不必要的）。非常感谢@Hidden Hobbes为您提供的3条建议。我已经纠正了这件事；第二个关于桌子，我没有添加，因为它实际上是一个大桌子外面，和几个小桌子里面在同一行，所以对于这一个我没有添加；有很多…事实上我想让不同街区之间的距离变大。但这些并不会影响结果，我今天尝试创建一个相对位置的父div（main），并包含几个绝对位置的子div，但它们仍然不能同时更改位置。如果我理解正确，那就是将表设置为固定，将所有箭头div设置为相对。这样不行。Hi@Turtles，对不起，我迟了答复。我对所有箭头和表格也尝试了类似的方法：NetMarginArrow{Position:absolute；width:1%；height:3%；left:5%；top:6%；}。表和箭头的位置仍然不能同时移动。。。