html无法正确放置元素
html无法正确放置元素
提问于 2018-08-20 00:09:36
所以，我是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列”，最后是第三行的两个下拉框与列名对齐。我该怎么做呢？
编辑: fiure阻止其他元素。
<!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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51919528
复制相关文章
相似问题
腾讯云开发者
