div 요소를 올바르게 정렬하려면 어떻게합니까?

내 html 문서의 본문은 3 가지 요소, 단추, 양식 및 캔버스로 구성됩니다. 버튼과 양식을 오른쪽 정렬하고 캔버스를 왼쪽 정렬 상태로 유지하고 싶습니다. 문제는 처음 두 요소를 정렬하려고 할 때 더 이상 서로를 따르지 않고 대신 가로로 옆에 있습니까?, 여기까지 코드가 있습니다. 오른쪽에있는 버튼 바로 다음에 양식을 따르기를 원합니다. 사이에 공간이 없습니다.

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

양식과 버튼을 모두 포함하는 div를 만든 다음을 설정하여 div를 오른쪽으로 띄울 수 float: right;있습니다.

float는 괜찮지 만 ie6 & 7에는 문제가 있습니다.

margin-left:auto; margin-right:0;내부 div에 사용하고 싶습니다 .

오래된 답변. 업데이트 : flexbox를 사용하면 모든 브라우저에서 거의 작동합니다.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

그리고 더 간단하게 더 멋지게 만들 수 있습니다.

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

그리고 더 환상적인 :

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>

이 질문에 대한 다른 답변 float:right은 부모 div 외부로 갈 수 있기 때문에 좋지 않습니다 (오버플로 : 부모에게는 숨겨져 때로는 도움이 될 수 있습니다 margin-left: auto, margin-right: 0).

text-align: right요소와 부모가 모두 inline또는 일 때 이것이 작동한다고 가정하고 특정 요소의 경우 작동 한다는 것을 알았습니다 inline-block.

참고 : text-alignCSS 속성은 텍스트와 같은 인라인 내용이 부모 블록 요소에서 어떻게 정렬되는지를 설명합니다. text-align블록 요소 자체의 정렬을 제어하지 않고 인라인 컨텐츠 만 제어합니다.

예를 들면 :

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

다음은 JS Fiddle 입니다.

이런 말인가요? http://jsfiddle.net/6PyrK/1

당신의 속성을 추가 할 수 float:right와 clear:both;형태 및 버튼을

상위 div의 오른쪽 끝에 나란히 정렬하려는 여러 div가있는 경우 상위 div에서 설정 text-align: right;하십시오.

flexboxwith flex-grow를 사용 하여 마지막 요소를 오른쪽으로 밉니다.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

당신은 IE9을 지원하고이 문제를 해결하기 위해 인 flexbox를 사용 할 수 있습니다 아래에없는 경우 : codepen

IE10 및 11 ( flexbox support ) 에는 몇 가지 버그가 있지만이 예제에는 없습니다.

로 컨테이너를 감싸서 <button>와를 세로로 정렬 할 수 있습니다 . 요소의 소스 순서는 위에서 아래로 표시되는 순서가되므로 순서를 다시 지정했습니다.<form>flex-direction: column

그런 다음 양식 & 버튼 컨테이너를로 컨테이너에 싸서 캔버스와 수평으로 정렬 할 수 있습니다 flex-direction: row. 다시 요소의 소스 순서는 왼쪽에서 오른쪽으로 표시되는 순서가되므로 다시 정렬했습니다.

또한,이 모든 제거하는 것이 필요 position하고 float질문에 링크 된 코드에서 스타일 규칙을.

다음은 위에 링크 된 코드 펜에서 HTML 버전을 정리 한 것입니다.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

그리고 여기 관련 CSS가 있습니다

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}

간단한 답변은 다음과 같습니다.

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>

padding-left : 60 % (예를 들어)를 사용하여 콘텐츠를 오른쪽에 맞추고 동시에 모든 컨테이너에서 콘텐츠를 감싸서 반응 형 컨테이너 (필자는 navbar가 필요함)로 모든 예제에서 작동하도록 할 수 있습니다.

부트 스트랩을 사용하는 경우 :

<div class="pull-right"></div>

나는 이것이 오래된 게시물이라는 것을 알고 있지만 바로 사용할 수는 없습니다 <div id=xyz align="right">.

왼쪽, 가운데, 오른쪽으로 바꿉니다.

내 사이트에서 일했습니다 :)