Question

你好我用javascript，chart.js和html＆amp; amp;写了这段代码。 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%   
}

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

感谢您的帮助！

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

Answer 1

除了已经提供的选项之外，另一个选择是使您的Global div成为一个表格，而您的左右div可以是该表格中连续的兄弟单元格。

如何将2 <div>并排放置

1 个答案: