수다닷컴

float으로 div 세 개를 가로로 나열하려면 어떻게 하나요?

진솔 2026.02.08 댓글 10

매번 질문만 드리네요. ^^;;
float:left를 주면 왼쪽으로 가고 float:right를 주면 오른쪽으로 가잖아요.
그런데 div 세 개를 나란히 놓으면서 앞의 두 개는 왼쪽, 마지막 하나는 오른쪽으로 두면 제대로 정렬되지 않나요?
각 요소 위치가 어긋나서 질문드려요.

댓글 10

  • 마디 2026.02.08

    float이 적용된 각 div의 width와 감싸는 div의 width를 계산해보세요.

  • 아서 2026.02.08

    예를 들어 감싸는 div가 299px이고 안쪽 div 세 개가 각각 100px이면 원하는 대로 배치되지 않을 수 있어요.
    감싸는 div의 너비가 안쪽 요소들의 너비보다 충분한지 확인해보세요.

  • 딸기맛사탕 2026.02.08

    그런데 위처럼 해보면 익스플로러 6에서는 제대로 보이고, 파이어폭스에서는 마지막 요소가 높이만큼 떨어져서 정렬돼요.

  • 진솔 2026.02.08

    float:left를 세 개 모두 줘봤는데 마지막 요소가 아래로 내려가네요.

  • 보단 2026.02.08

    말씀해주신 대로 하면 첫 번째는 위에 붙고 2, 3번은 나란히 붙는데, 첫 번째 요소 높이만큼 아래로 정렬돼요.

  • 자랑 2026.02.08

    width를 정해두면 되는 것 같아요.

  • 치킨마루 2026.02.08

    그러네요.

  • 상1큼한렩 2026.02.08

    세 개 모두 float:left를 줘보세요.

  • 희미해 2026.02.08

    전부 float:left로요.

  • 우람늘 2026.02.08

    1번은 left, 2번은 left, 3번은 right로 해보거나 1번은 left, 2번과 3번은 right로 해보세요. ^^

프로그램 개발일반 다른 글

목록