HTML을 변경하지 않고 두 Div를 수평으로 정렬하려면 어떻게 해야 합니까?

마크업을 변경하지 않고 요소를 가로로 정렬

CSS를 사용하여 가로로 배치된 두 개의 div, #element1 및 #element2가 있다고 가정합니다. 그러나 #element2의 콘텐츠 변형으로 인해 #element1과 완벽하게 일치하지 않습니다. HTML 구조를 수정하지 않고 콘텐츠나 브라우저 차이에 관계없이 정렬할 수 있는 방법이 필요합니다.

해결책: 인라인 블록 디스플레이 사용

이 정렬을 수행하려면 두 요소 모두에 display: inline-block 속성을 사용할 수 있습니다.

#element1 {
  display: inline-block;
  margin-right: 10px; /* Set padding between the elements */
}

#element2 {
  display: inline-block;
}

display: inline-block을 설정하면 해당 요소는 인라인 요소와 유사하게 동작하지만 블록 수준 속성을 유지합니다. 이렇게 하면 원래 너비와 높이를 유지하면서 수평으로 배치할 수 있습니다. #element1의 margin-right 속성은 요소 사이에 원하는 간격을 지정합니다.

예

다음은 정렬을 보여주는 예입니다.

<style type="text/css">
  #element1 {
    display: inline-block;
    margin-right: 10px;
  }

  #element2 {
    display: inline-block;
  }
</style>
<div>

이 솔루션은 #element2를 #element1 옆에 효과적으로 정렬하여 #element2의 가변 너비에 관계없이 일관된 패딩을 유지합니다.

위 내용은 HTML을 변경하지 않고 두 Div를 수평으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!