>웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 세 개의 Div를 나란히 띄우는 방법은 무엇입니까?

CSS를 사용하여 세 개의 Div를 나란히 띄우는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-12-21 05:45:09919검색

How to Float Three Divs Side by Side Using CSS?

CSS를 사용하여 세 개의 Div를 나란히 플로팅

div를 나란히 플로팅하면 가로 레이아웃을 만들 수 있습니다. 두 개의 div로 이 작업을 수행하는 것은 간단하지만 다음과 같은 질문이 생깁니다. 세 개 이상의 div로 어떻게 동일한 효과를 얻을 수 있습니까?

해결책은 각 div의 너비를 정의하고 CSS 속성 float를 적용하는 데 있습니다. 왼쪽;. 이 속성은 div를 수평으로 배치하고 서로 옆에 흐르도록 강제합니다.

설명하기 위해 다음 예를 고려하십시오.

<div>

이 코드에서는 너비는 500px로 고정됩니다. 그 안에는 세 개의 하위 div가 있으며 각각 고유한 너비가 있습니다. 플로트: 왼쪽; 속성은 이러한 하위 div가 가로로 정렬되도록 합니다.

마지막으로
CSS 속성이 있는 요소clear: left; 상위 div의 끝에 추가됩니다. 이렇게 하면 부동 요소가 모두 지워져 세 div 아래의 나머지 콘텐츠가 상위 div의 왼쪽 가장자리에 맞춰 표시됩니다.

위 내용은 CSS를 사용하여 세 개의 Div를 나란히 띄우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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