묻고답하기
DIV 두개를 가로로 나란히 놓는 방법좀 가르쳐주세요
2013.08.04 19:23
DIV1 과 DIV2 모두 하나의 DIV에 존재하지 않고 따로 개별적인 DIV 에요
두개의 DIV를 만들었고 각각 속에 또 DIV값이 있긴한데 이건 별로 상관 상관없는것 같구요
DIV1 에 style="float:left" // DIV2 에 style="float:right" 값을 지정하고 각 DIV 클래스에 마진값을 margin: 0 auto 으로 주었는데요
저렇게 나오네요. 원래는 일직선으로 나오다가 각 DIV 스타일을 LEFT / RIGHT로 주니까 일직선 가로로 정렬이 안되고 저렇게 나옵니다
이거 방법을 검색해봐도 제가 한 것이랑 같거나 비슷하거나 모르겠어서 이렇게 질문드립니다
어떻게하면 두개를 같은 위치에 가로로 나란히 놓을수 있을까요?
댓글 2
-
세진님 답변 맞구요. 혹시나 해서 추가 답변을 드리자면
DIV1 DIV2 에 DIV0을 추가해서 DIV0 에 DIV1 ,DIV2 가 들어가도록 셋팅하는것도 하나의 방법이겠죠.
<DIV0>
<DIV1></DIV1>
<DIV2></DIV2>
</DIV0>
이렇게
DIV0 이 DIV1,2 를 감싸주는 형식이죠.
그렇게 해서 사이즈를 수정하시면 되구요.
그래도 잘 맞지 않다면 포지션을 주는 방식이 있겠습니다.
DIV0 이 DIV1,2 를 감싸주는 상태에서
DIV2 에 position:absolute ; right:0;이라는 명령어를 주어서
DIV2 를 오른쪽 끝에서 시작하게 만드는거죠. 당연히 DIV1은 왼쪽끝에 붙어 있는 상황이되겠구요.
이처럼 활용하시면 더욱 쉽게 관리할수 있겠습니다.
두 div 의 가로길이 합이 전체 가로길이보다 작아야하는데
이 경우, div1+div2 의 width 값이 더 클겁니다. 가로길이를 줄여보세요