브라우저 폭에 따라서 div 박스의 줄당 배치수를 바꾸고 싶은데요.
예를 들어 폭 100px 짜리 div 박스가 5개가 있다면
폭 1000px 화면에서는
div1 div2 div3 div4 div5
이렇게 배치되고, 폭 200px 화면에서는
div1 div2
div3 div4
div5
이런식으로 배열하고 싶은데요. 이게 자바스크립트를 이용하지 않고도 가능했던거 같은데 혹시 아시는분 계신가요?
답변1
<div style="width:100%; overflow:hidden;">
<div style="float:left; width:100px; height:20px;">1</div>
<div style="float:left; width:100px; height:20px;">2</div>
<div style="float:left; width:100px; height:20px;">3</div>
<div style="float:left; width:100px; height:20px;">4</div>
<div style="float:left; width:100px; height:20px;">5</div>
</div>
답변2
float:left 혹은 display:inline이 줄줄이 붙는 스타일 속성입니다.
div를 예로 드셨으니 이런경우 display:inline-block 속성도 가능한데
지원하지 않는 브라우저도 있으니 float:left(왼쪽 정렬)사용이 가장 좋습니다.
대신 float을 사용하면 꼭 해제(clear)를 해주거나 부모객체에 높이값을 지정해주는게 좋습니다.