HTML div 왼쪽, 오른쪽 배치

HTML div 왼쪽, 오른쪽 배열

HTML div 좌우 배열, 양쪽 배치

2 예시 1[편집]

• http://zetawiki.com/ex/css/div-left-right.html

<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[편집]

• http://zetawiki.com/ex/css/div-left-right-1b.html

<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[편집]

• http://zetawiki.com/ex/css/div-left-right-2.html
• 대략 좋지 않음. 양쪽 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>

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

[출처] https://zetawiki.com/wiki/HTML_div_%EC%99%BC%EC%AA%BD,_%EC%98%A4%EB%A5%B8%EC%AA%BD_%EB%B0%B0%EC%B9%98