>  기사  >  웹 프론트엔드  >  내 div가 수평으로 정렬되지 않는 이유는 무엇이며 어떻게 해결할 수 있나요?

내 div가 수평으로 정렬되지 않는 이유는 무엇이며 어떻게 해결할 수 있나요?

Susan Sarandon
Susan Sarandon원래의
2024-11-03 04:01:021003검색

Why are my divs not aligning horizontally and how can I fix it?

Div의 가로 정렬

어떤 이유로 div가 컨테이너 div 내에서 항상 가로로 정렬되지 않아 시각적으로 바람직하지 않은 간격이 남습니다. 이 문제는 float를 사용하여 하위 div를 배치할 때 발생할 수 있습니다. 다음을 고려하십시오.

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}

.block {
  width: 100px;
  float: left;
}</code>

이 코드는 행 div 내에서 하위 div를 가로로 배치하는 것을 목표로 합니다. 그러나 하위 div가 하나만 있는 행이 있어 공백이 발생하는 경우도 있습니다.

이를 바로잡기 위한 대체 접근 방식은 float 대신 display: inline-block을 활용하는 것입니다. 이를 통해 너비와 높이를 포함한 블록과 같은 속성을 유지하면서 수평 정렬을 달성할 수 있습니다. 수정된 CSS는 다음과 같습니다.

<code class="css">.block {
  width: 100px;
  display: inline-block;
}</code>

위 내용은 내 div가 수평으로 정렬되지 않는 이유는 무엇이며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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