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

두 개의 Div를 나란히 배치하는 방법

두 개의 div 요소를 나란히 배치하려면 float를 사용할 수 있습니다. CSS의 속성입니다.

상위 div(#wrapper) 내에서 너비를 설정하고 시각적으로 테두리를 추가합니다. 명확성.

#wrapper {
  width: 500px;
  border: 1px solid black;
}

첫 번째 div(#first)에 고정 너비를 지정하고 테두리를 적용합니다.

#first {
  width: 300px;
  border: 1px solid red;
}

첫 번째 div를 왼쪽으로 띄우려면 다음을 추가합니다.

#first {
  ...
  float: left;
}

두 번째 div(#second)는 너비를 지정하지 않고 그대로 두고 너비를 지정합니다. border:

#second {
  border: 1px solid green;
}

두 번째 div가 첫 번째 div의 높이를 준수하도록 하려면 래퍼 div에 오버플로 속성을 추가하세요.

#wrapper {
  ...
  overflow: hidden;
}

또는 첫 번째 div와 두 div를 모두 부동으로 설정할 수 있습니다. 두 번째 div가 있지만 플로팅된 하위 항목을 포함하도록 래퍼 div에 오버플로 속성을 설정해야 합니다.

#wrapper {
  ...
  overflow: hidden;
}

#first {
  ...
  float: left;
}

#second {
  ...
  float: left;
}

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