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

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

CSS에서는 float 속성을 사용하여 두 개의 div를 나란히 배치할 수 있습니다.

플로팅원 Div

한 div를 다른 div 옆에 플로팅하려면 float: left; 원하는 div에 속성을 추가합니다. 이렇게 하면 div가 래퍼의 왼쪽으로 이동하게 됩니다.

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    float: left; /* Float div to the left */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* Prevent text wrapping below #first */
}

두 Div 모두 플로팅

두 div를 나란히 플로팅하려면 float를 추가하세요. : 왼쪽; 두 div 모두에 속성을 부여합니다. 그러나 Overflow: Hidden;을 추가해야 할 수도 있습니다. div가 래퍼 너비 이상으로 확장되는 것을 방지하기 위해 래퍼 div에 추가합니다.

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* Prevent floated divs from extending beyond wrapper */
}
#first {
    width: 300px;
    float: left; /* Float div 1 to the left */
    border: 1px solid red;
}
#second {
    float: left; /* Float div 2 to the left */
    border: 1px solid green;
}

이러한 부동 속성을 사용하면 래퍼 div 내에 두 개의 div를 나란히 배치할 수 있습니다. 녹색 div의 높이가 래퍼의 전체 높이를 결정합니다.

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