javascript - 如何放置 2<div>s并排</div>

问题描述

您好，我使用 javascript、chart.js 和 html & css 编写了这段代码：

<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="line-chart" width="800" height="450"></canvas>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id = "Global">
<div id = "right">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id = "left">
<script>
var ctx = new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
/*         labels: [18.123,46.8603108462,75.5976216923,104.334932538] */
        datasets: [{
            data: [{'y': 426777.148122,'x': 18.123},
{'y': 258927.721326,'x': 46.8603108462},
{'y': 176174.771954,'x': 75.5976216923},
{'y': 129604.15967,'x': 104.334932538},
{'y': 101328.238625,'x': 133.072243385}],
            label: "Model",
            borderColor: "#3e95cd",
            fill: false     
        }, {
            label : 'Data',
            fill:false,
            showLine: false,
            backgroundColor: "#FF0000",
            data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328},
{x: 22.0, y: 410452.691467}],
                        type: 'line'
        }]        
    },
    options: {
        title:{
            display: true,
            text:"Tools"
        },
        scales: {
            xAxes: [{
                type: 'logarithmic',
                position: 'bottom'
            }],
            yAxes: [{
                type: 'logarithmic'
            }]
        }
    }
})
</script>
</div>
</div>
</body>

</html>

实际上，当我在浏览器中查看结果时，我会看到上面的 javascript， <div id = "right">而我希望 javascript 在左侧和<div id = "right">右侧。

这是我的CSS：

#Global
{
    width:100%;
}
#Global #left {
    float:left;
    width:60%;
}
#Global #right {
    margin-left:60%   
}

我以为它会起作用，但事实并非如此。

谢谢您的帮助！

这就是我在浏览器中查看结果时得到的原因：

标签： javascripthtmlcsswebchart.js

javascript - 如何放置 2
s并排

问题描述

解决方案

推荐阅读

javascript - 如何放置 2s并排

问题描述

解决方案

推荐阅读

javascript - 如何放置 2
s并排