HTML div 왼쪽, 오른쪽 배치

1 개요

HTML div 왼쪽, 오른쪽 배치

HTML div 왼쪽, 오른쪽 배열

HTML div 좌우 배열, 양쪽 배치

2 예시 1

<style>
.left-box {
  background: red;
  float: left;
}
.right-box {
  background: blue;
  float: right;
}
</style>
<div class='left-box'>왼쪽</div>
<div class='right-box'>오른쪽</div>

3 예시 2

<style>
.left-box {
  background: red;
  float: left;
}
.right-box {
  background: yellow;
  float: right;
}
</style>
<div class='left-box'>왼쪽1</div>
<div class='left-box'>왼쪽2</div>
<div class='right-box'>오른쪽2</div>
<div class='right-box'>오른쪽1</div>

4 예시 3

• 대략 좋지 않음. 양쪽 1개씩만 가능 (2개 이상되면 겹침)

<style>
.left-box {
  position: absolute;
  top: 0; left: 0;
  background: red;
}
.right-box {
  position: absolute;
  top: 0; right: 0;
  background: blue;
}
</style>
<div class='left-box'>왼쪽</div>
<div class='right-box'>오른쪽</div>

5 같이 보기

• HTML div 왼쪽, 오른쪽 분할
• HTML div 3개 왼쪽-가운데-오른쪽 배열
• HTML div 태그