다른 요소의 북쪽에 요소를 배치하는 방법

캔버스와 두 개의 입력 상자가 있습니다. 레이아웃이 그림의 레이아웃과 일치하도록하고 싶습니다. 크기를 조정할 때 레이아웃을 그대로 유지하고 싶습니다. 캔버스가 화면 중앙에 위치합니다. 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>

출처

2014-07-16 Colton

북. 음, 제목이 새 것입니다 ... HTML은 어떻습니까? 우리는 그 id에 해당하는 요소를 추측하기로되어 있습니까? –

위/상단이 다른 게시물의 "진행중"을 의미하기 때문에 북쪽으로 말합니다. – Colton

HTML을 게시하십시오. – jtheletter

항상 그것 리터 않는 position 속성을 피하기 ast 리조트입니다. 나중에 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 */ 
}

출처

2014-07-16 09:58:46 NoobEditor

고맙다. 나는 body 요소에'text-align : center'를 추가하여 모든 것을 가운데에 놓아야 만했다. – Colton

다른 요소의 북쪽에 요소를 배치하는 방법

답변

관련 문제