728x90
반응형
html 요소에 대해서 포스팅 했을때 요소에 대해서 한번 언급했지만,
div는 블럭 요소로 가로값이 얼마든지 공간을 다 차지해 버리기 때문에 자동으로 줄바꿈이 됩니다.
div 가운데 정렬은 동적일 때, 가로값이 픽스 되었을 때 두 가지를 함께 전에 포스팅 했으니, 오늘은 div를 좌우로 배열하는 법을 포스팅하겠습니다.
div를 좌우로 인라인요소처럼 배열하고 싶을때는 선 객체에 float:left;로 왼쪽 정렬을 설정하고, 뒤에 오는 객체는 display:inline-block;로 내용 영역을 채워줍니다.
아래 소스를 첨부했으니 테스트 해보세요.
<style>
.box1 {
float:left;
width:200px;
height:100px;
background-color:#234234;}
.box2 {
display:inline-block;
width:200px;
height:100px;
background-color:#666666;
margin-left:10px;}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<위 소스에 대한 결과 화면>
728x90
반응형
'공부 > html, css' 카테고리의 다른 글
| 선택자 (구조선택자) : nth-child, first-child, first-child (0) | 2023.01.07 |
|---|---|
| div 이동 (0) | 2023.01.07 |
| div 가운데 정렬 (세로) (0) | 2023.01.07 |
| div 가운데 정렬 (가로) (0) | 2023.01.07 |
| 뷰포트 설정 (viewport) (0) | 2015.07.01 |
