我有一个 Canvas 和两个输入框。我希望布局与图片相匹配，并且我希望它们在调整大小时保持原位。 Canvas 位于屏幕中央。我使用 jquery 来实现图片中的效果，但是在调整大小时一切都移动不正确。我确定有更简单的方法可以做到这一点，有什么想法吗？
CSS:
#userAndPass {
border:solid 1px #333;
width:150px;
height:28px;
position:absolute;
}
#viewport {
border:solid 1px #333;
height : 700px;
margin: auto;
left:0; right:0; top:0; bottom:0;
position: absolute;
width : 1000px;
z-index:100;
}
JQuery:
var offset = $('#viewport').offset();
var user = $('#user');
$('#user').offset({top: (offset.top - 27), left:offset.left});
$('#pass').offset({top: (offset.top - 27), left:offset.left+160});
HTML:
<body>
<input id="user" class="userAndPass" type="text" placeholder="username"></input>
<input id="pass" class="userAndPass" type="password" placeholder="password"></input>
<canvas id="viewport"></canvas>
</body>
最佳答案
总是避免 position 属性，除非它是最后的手段....如果你有太多的 css，它总是会发生冲突:)
将所有 DOM 包装到一个父类中 (leftBound) 并将其中的内容左对齐。
HTML
<div class="leftBound">
<input id="user" class="userAndPass" type="text" placeholder="username"></input>
<input id="pass" class="userAndPass" type="password" placeholder="password"></input>
<br /> <!-- to push canvas below input boxes -->
<canvas id="viewport">canvas in red border</canvas>
</div>
CSS
.leftBound, input {
text-align:left;
border:1px solid grey;
display : inline-block;
white-space: nowrap; /* if you dont want to wrap it to new line*/
vertical-align:top; /* push input boxes to top*/
}
#userAndPass {
border:solid 1px #333; /*for demo only */
width:150px;
height:28px;
}
#viewport {
border:solid 1px #333;
height : 700px;
margin: auto;
width : 1000px;
border:1px solid red; /*for demo only */
}
关于html - 如何将一个元素放置在另一个元素的北边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24776168/