CSS 플로트를 사용하여 두 개의 Div를 나란히 배치하는 방법은 무엇입니까?

CSS를 사용하여 두 Div를 나란히 배치하는 방법

CSS에서는 원하는 수직 정렬과 div 요소의 근접성을 달성할 수 있습니다. 다양한 기술을 통해. 한 가지 효과적인 접근 방식은 플로팅을 활용하는 것입니다.

플로트 사용

내부 div 중 하나 또는 둘 다를 나란히 플로팅하면 인접한 div의 레이아웃에 영향을 주지 않고 가로로 정렬할 수 있습니다. content.

플로팅원 Div

float 추가: left; 아래 CSS에서 #first에 대한 속성은 왼쪽으로 부동하게 되어 #wrapper div의 왼쪽을 차지하고 #두 번째 div는 오른쪽에 유지됩니다.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  overflow: hidden;
}

Floating 두 Div

#first와 #second를 모두 플로팅하면 나란히 배열됩니다. 그러나 #wrapper div가 부동 자식 주위로 축소되는 것을 방지하는 것이 중요합니다. 이를 달성하려면 Overflow: Hidden; 을 추가하세요. #wrapper에 두 부동 요소가 모두 포함되어 있는지 확인하세요.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  float: left;
}

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