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

1 개요

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

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

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

div 3단 분할

2 방법 1: flex ★

• 외부 박스(container)에 display: flex;
• 내부 박스에 flex: 숫자;
• 아래는 너비를 1:3:1 비율로 분할한 예시임

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

3 방법 2: float

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

3.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>

3.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>

4 같이 보기

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