Question

因此，我是html的新手，并尝试使用html和js进行绘图。但是我似乎无法正确放置元素。这是代码段。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        #figurecontainer {
            margin: 0px;
            width: 960px;
            height: 800px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .scatterlayer .trace:last-child path {
            pointer-events: all;
        }
    </style>

    <title>My Plotter</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
    <input style="float:left; width:20%; " type="file" id="input">
    <div style="float:left; width:20%;" id="status" ><p>Load Data to plot</p></div>
    <input style="display: none ; width: 100px" id="saveMe" type="button" value="SaveData">    
    <div >
        <p style="float: left; width: 100px">X column</p>
        <p >Y column</p>
    </div>
    <div> 
        <select  style="width:100px"  id="xcolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        <select style="width:100px" id="ycolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>

    <div id="figurecontainer"></div>


    <script>
        // some js
    </script>

</body>

</html>

我想要第一行的前三个元素，然后是下一个“ X列”和“ Y列”，最后是第三行上的两个下拉框，并以列名结尾。我该怎么办？

编辑：火元素会阻止其他元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        html {
            box-sizing: border-box;
        }
        body {
            float: left;
            width: 100%;
        }
        .row {
            float: left;
            width: 100%;
        }
        input[type=file] {
            display: inline-block;
            margin-right: 15px;
        }
        #status {
            display: inline-block;
            margin-right: 15px;
        }
        .saveMe {
            display: inline-block;
        }
    </style>

<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
    <div class="row">
        <input type="file" id="input">
        <div id="status" >Load Data to plot</div>
        <input id="saveMe" type="submit" value="SaveData">
    </div>
    <div class="row">
        <p style="float: left; width: 100px">X column</p>
        <p >Y column</p>
    </div>

<div class="row"> 
    <select  style="width:100px"  id="xcolumn">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <select style="width:100px" id="ycolumn">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
</div>

<div id="figurecontainer"></div>


<script>
var layout = {
    autosize: true,
    showlegend: false,
    margin: {
        t: 20,
        r: 10,
        b: 30,
        l: 30,
        pad: 0
    },
    xaxis: {
        range: [0, 8],
        fixedrange: false,
        layer: 'below traces'
    },
    yaxis: {
        range: [0, 51],
        fixedrange: false,
        layer: 'below traces'
    },
    font: {size: 16}
};

var breakpoints = {
    x: [1, 8],
    y: [5, 30],
    type: 'scatter',
    cliponaxis: false,
    mode: 'markers',
    marker: {
        size: 5,
        symbol: "circle-open-dot",
        color: '#b00',
        line: {
            width: 2
        }
    },
    hoverinfo: 'x+y'
};

var figurecontainer = document.getElementById("figurecontainer");
Plotly.plot(figurecontainer, [breakpoints], layout);
</script>

Answer 1

您的代码包含多种类型的定位元素，这就是为什么您的网页结构不正确的原因，但是对于初学者来说，这是可以的。我稍微更改了您的代码，这是最终的html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
		html {
			box-sizing: border-box;
		}
		body {
			float: left;
			width: 100%;
		}
		.row {
			float: left;
			width: 100%;
		}
		input[type=file] {
			display: inline-block;
			margin-right: 15px;
		}
		#status {
			display: inline-block;
			margin-right: 15px;
		}
		.saveMe {
			display: inline-block;
		}
    </style>

    <title>My Plotter</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
	<div class="row">
		<input type="file" id="input">
		<div id="status" >Load Data to plot</div>
		<input id="saveMe" type="submit" value="SaveData">
	</div>
    <div class="row">
        <p style="float: left; width: 100px">X column</p>
        <p >Y column</p>
    </div>
	
    <div class="row"> 
        <select  style="width:100px"  id="xcolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        <select style="width:100px" id="ycolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>

    <div id="figurecontainer"></div>


    <script>
        // some js
    </script>

</body>

</html>

html不能正确放置元素

1 个答案: