HTML과 CSS에서 요소를 나란히 정렬하려면 어떻게 해야 합니까?

요소를 나란히?

요소를 나란히 정렬하는 것은 웹 개발의 일반적인 작업입니다. 이를 달성하는 방법에는 여러 가지가 있으며 각각 고유한 장점과 단점이 있습니다. 아래에서는 가장 인기 있는 몇 가지 방법을 살펴보겠습니다.

플로팅 요소

요소는 왼쪽이나 오른쪽으로 부동할 수 있으므로 서로 옆에 정렬할 수 있습니다. 이 방법은 간단하며 대부분의 경우에 잘 작동합니다. 그러나 페이지의 다른 요소 레이아웃에 의도하지 않은 결과가 발생할 수 있으므로 이 방법을 신중하게 사용하는 것이 중요합니다.

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.child-left {
  float: left;
}

.child-right {
  float: right;
}

인라인 블록 표시

요소를 나란히 정렬하는 또 다른 방법은 표시 속성을 인라인 블록으로 설정하는 것입니다. 이렇게 하면 인라인 요소(예: 텍스트 또는 이미지).

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.child-left {
  display: inline-block;
}

.child-right {
  display: inline-block;
}

Flexbox

Flexbox는 요소를 정렬하는 유연하고 다양한 방법을 제공하는 강력한 레이아웃 시스템입니다. Flexbox를 사용하면 주축(예: 수평 또는 수직)과 교차축(예: 왼쪽에서 오른쪽 또는 왼쪽에서 오른쪽으로)을 따라 요소가 배치되는 방식을 지정할 수 있습니다. 오른쪽에서 왼쪽으로).

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: row;
}

.child-left {
  flex-basis: auto;
}

.child-right {
  flex-basis: auto;
}

그리드

CSS 그리드는 요소를 나란히 정렬하는 데 사용할 수 있는 또 다른 레이아웃 시스템입니다. 그리드는 2차원 레이아웃 시스템을 제공하므로 요소를 수평 및 수직으로 배치할 수 있습니다.

HTML:

<div class="parent">
  <div class="child-left">A</div>
  <div class="child-right">B</div>
</div>

CSS:

.parent {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.child-left {
  grid-column: 1 / 2;
}

.child-right {
  grid-column: 2 / 3;

위 내용은 HTML과 CSS에서 요소를 나란히 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html Property this display position Other

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.