gpt4 book ai didi

html - 如何将一个元素放置在另一个元素的北边

转载 作者:太空宇宙 更新时间:2023-11-04 13:09:46 25 4
gpt4 key购买 nike

我有一个 Canvas 和两个输入框。我希望布局与图片相匹配,并且我希望它们在调整大小时保持原位。 Canvas 位于屏幕中央。我使用 jquery 来实现图片中的效果,但是在调整大小时一切都移动不正确。我确定有更简单的方法可以做到这一点,有什么想法吗?

enter image description here

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) 并将其中的内容左对齐。

Demo fiddle here

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com