CSS에서 float 속성과 여러 블록
이제 HTML 코드에 자식 div가 하나가 아니라 두 개가 있고,
둘 다 float 속성 값이 left로 설정되었다고 가정해 봅시다.
어떻게 되는지 살펴보겠습니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
보시다시피, 두 자식 블록이 가로로 정렬되었으며, HTML 코드에서 첫 번째 블록이 왼쪽에 위치하게 됩니다.
이제 값 left 대신 right 값을 써 봅시다.
이 경우 블록들은 오른쪽에 떠 있게 되며,
그 순서는 HTML 코드의 순서와 반대로 바뀝니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
