수직 스태킹을 유지하면서 DIV 요소를 오른쪽으로 정렬하는 방법은 무엇입니까?

DIV 요소를 오른쪽으로 정렬

문제:

HTML 문서에서 오른쪽에 있는 여러 DIV 요소는 요소의 수직 스택이 손실되고 결국 수평으로 배열되는 문제로 이어질 수 있습니다.

분석:

"float: right"를 사용하여 DIV 정렬로 인해 이 문제가 발생할 수 있으며, 특히 DIV가 상위 DIV 내에 포함된 경우 더욱 그렇습니다. 이러한 경우 플로팅 DIV는 문서의 일반적인 흐름에서 제거되고 서로 인접하게 배치됩니다.

해결책:

보존하면서 올바른 정렬을 얻으려면 수직 스태킹의 경우 대체 접근 방식은 다음 CSS 속성을 사용하는 것입니다.

margin-left: auto;

• 이 속성은 DIV의 왼쪽 여백을 자동으로 조정합니다. 상위 컨테이너의 오른쪽으로 밀어 넣습니다.

margin-right: 0;

• 이 속성은 오른쪽 여백을 제거하여 DIV를 보장합니다. 컨테이너의 오른쪽 가장자리와 수평을 유지합니다.

예:

다음은 이러한 속성을 사용하여 제공된 코드의 향상된 버전입니다.

<code class="css">#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}</code>

이러한 속성을 사용하면 버튼과 양식이 오른쪽으로 정렬되어 의도한 대로 수직으로 차례대로 쌓이게 됩니다.

위 내용은 수직 스태킹을 유지하면서 DIV 요소를 오른쪽으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!