흐름에 영향을 주지 않고 Div 요소를 오른쪽 정렬하는 방법은 무엇입니까?

Div 요소 오른쪽 정렬

여러 div 요소가 있고 컨테이너 내에서 정렬하려는 경우 다음과 같이 할 수 있습니다. 요소의 흐름에 영향을 주지 않고 원하는 레이아웃을 달성하는 것이 어렵습니다. 이 문서에서는 div 요소를 정렬하는 방법, 특히 오른쪽 정렬에 중점을 두고 설명합니다.

다음 시나리오를 고려해 보세요. 본문 요소 내에 버튼, 양식, 캔버스라는 세 개의 div 요소가 있습니다. 요구 사항은 캔버스의 왼쪽 정렬을 유지하면서 버튼과 양식 요소를 오른쪽 정렬하는 것입니다. 그러나 현재 CSS 코드에서는 처음 두 요소가 오른쪽에 연속적으로 정렬되는 대신 서로 옆에 수평으로 정렬됩니다.

질문에 제공된 CSS는 버튼과 양식을 오른쪽 정렬하려고 시도합니다. float 속성을 사용하는 div. 이 접근 방식은 일반적으로 효과적이지만 이중 여백 버그로 인해 Internet Explorer 버전 6 및 7에서 문제가 발생할 수 있습니다.

이 문제를 해결하려면 다음과 같은 대체 접근 방식을 권장합니다.

<code class="css">#addEventForm {
  margin-left: auto;
  margin-right: 0;
}</code>

이 CSS 규칙은 Internet Explorer에서 요소의 흐름을 방해하지 않고 양식 div를 버튼 div의 오른쪽에 자동으로 정렬합니다. 왼쪽 여백을 자동으로, 오른쪽 여백을 0으로 설정하여 양식 div가 버튼 div 바로 다음 위치를 유지하면서 컨테이너의 오른쪽 가장자리로 푸시되도록 합니다.

위 내용은 흐름에 영향을 주지 않고 Div 요소를 오른쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!