Question

现在我的HTML页面有多个div。这就是它的样子：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="thecss.css">
    <title>Information</title>
</head>

<body>
    <div id="wrapper">
        <img src = "the.jpg" class = "thelogo" width="150" height="50"></src>

        <div id="barChart">
            <h1 id = "barcharthead"> Information One </h1>
            <canvas id="income"></canvas>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
            <script>
                var canvas = document.getElementsByTagName('canvas')[0];
                var browserwidth = (window.outerWidth * .347222222222);
                var browserheight = (window.outerHeight * 0.4028868175);
                canvas.width = browserwidth;
                canvas.height = browserheight;
            </script>
        </div>

        <script src="Chart.min.js"></script>
        <script src="getbytesinfo.js"></script>
        <script src="makebarchart.js"></script>

        <div id="pieChart"></div>           
            <script src="getinfo.js"></script>
            <script src="makepiechart.js"></script>
        </div>
    </div>
</body>
</html>

然而，我的两个div目前彼此重叠。我认为添加以下CSS可以解决问题，并且它在大多数情况下都做了：

#wrapper {
        position:relative;
        width: 100%;
        margin: 0 auto;
}
#pieChart {
        position:absolute;
        left:1%;
 }

#barChart {
        position:absolute;
        right:1%;
}

但是当我尝试缩放浏览器时，div再次相互重叠。无论如何，我可以做到这样div，基本上卡在屏幕上？换句话说，即使用户开始最小化浏览器尺寸，图表也根本不会移动？

谢谢！

重新缩放浏览器时，不会移动HTML div

0 个答案: