HTML div 3개 왼쪽-가운데-오른쪽 배열

1 개요

HTML div 3개 한줄로 배열 (왼쪽-가운데-오른쪽)

div 3개 왼쪽-가운데-오른쪽 한줄로 배열

div 왼쪽, 가운데, 오른쪽 배치

div 3단 분할

2 방법 1: float

• 왼쪽 div는 float: left;
• 오른쪽 div는 float: right;
• 가운데 div는 margin: 0 auto;를 적용
• 단, div를 왼쪽-오른쪽-가운데 순으로 배열해야 함 ★

2.1 예시 1

<style>
#container {
    text-align: center;
}
#left-box {
    background-color: red;
    float: left;
}
#center-box {
    background-color: yellow;
    margin: 0 auto;
}
#right-box {
    background-color: blue;
    float: right;
}
</style>
<div id='container'>
    <div id='left-box'>왼쪽</div>
    <div id='right-box'>오른쪽</div>
    <div id='center-box'>가운데</div>
</div>

2.2 예시 2

<style>
#left-box {
    width: 100px;
    background-color: red;
    float: left;
}
#center-box {
    text-align: center;
    background-color: yellow;
    margin: 0 auto;
}
#right-box {
    width: 100px;
    background-color: blue;
    float: right;
    text-align: right;
}
</style>
<div>
    <div id='left-box'>왼쪽</div>
    <div id='right-box'>오른쪽</div>
    <div id='center-box'>가운데</div>
</div>

3 방법2: flex

<style>
#container {
  display: flex;
}
#left-box {
  flex: 1;
  background: red;
}
#center-box {
  flex: 2;
  background: yellow;
  text-align: center;
}
#right-box {
  flex: 1;
  background: blue;
  text-align: right;
}
</style>
<div id='container'>
    <div id='left-box'>왼쪽</div>
    <div id='center-box'>가운데</div>
    <div id='right-box'>오른쪽</div>
</div>

4 같이 보기

• HTML div 왼쪽, 오른쪽 배치
• HTML div 왼쪽, 오른쪽 분할
• HTML div 태그
• 부트스트랩 3단 분할