CSS 두 줄로 배치 하는 방법 예제

CSS 두 줄로 배치 하는 방법 예제

http://oceanfog3.mireene.com/Hospital/hello.html

아래 화면과 같이 늘렸을 때는 늘어나고

줄였을 때는 아래로 내려가고

특정 크기 이하로 줄어들지 않도록 HTML5 객체를 CSS를 이용하여 배치하는 법을 알아보자.

줄이면 아래로 촤라락 내려간다.

줄여도 특정 크기 이하로 줄어들지 않는다.(400px)

하는 방법은 세가지 요소를 이용하면 된다.

float:left;

clear:right;

min-width:400px;

아래 소스코드를 보면 div id="div03" 이라고 되어 있는 부분이 있다. 여기에 clear:right; 속성만 추가해 주면 된다. 그러면 아랫줄에 나와야 하는 객체가 더이상 첫번째 줄에 달라붙지 않는다.

자세한건 예제를 보시면서 익혀보시기 바란다. 끗.