Question

我有一个画布和两个输入框。我希望布局与图片的布局相匹配，我希望它们在调整大小时保持原位。画布以屏幕为中心。我使用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>

Answer 1

始终避免使用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 */
}

如何将元素放在另一个元素的北方

1 个答案: