[CSS] div 태그 수평으로 나란히 놓는 방법

 

 

DIV영역 여러개를 나란히 놓으려면, float 속성을 이용하면 된다.
창의 너비를 100%로 보았을 때, DIV영역의 갯수에 따른 상대적 비율을 DIV영역의 너비로 지정해 준다.

예컨데, DIV영역 세 개를 나란히 놓는다면, 하나의 영역 너비는 100%의 3분의 1인 33%가 된다. DIV영역 네 개를 나란히 놓는다면, 하나의 영역 너비는 100%의 4분의 1인 25%가 된다.

 

<div style="border: 1px solid gold; float: left; width: 33%;">
	첫번째 영역
</div>
<div style="border: 1px solid red; float: left; width: 33%;">
	두번째 영역
</div>
<div style="border: 1px solid blue; float: left; width: 33%;">
	세번째 영역
</div>

 

 

 

 

참고 사이트

https://ojji.wayful.com/2014/01/HTML-DIV-to-Float-Three-Divs-side-by-side.html