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

1 개요

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

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

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

div 3단 분할

2 방법 1: flex ★

• 외부 박스(container)에 display: flex;
• 내부 박스에 flex: 숫자; 형식으로 비율 기입

또는 flex-basis: 크기; 형식으로 크기 지정

2.1 예시: 1:3:1 분할

• 아래는 너비를 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>

2.2 예시: 100px:*:150px 분할

<style>
#container {
  display: flex;
}
#box-left {
  background: red;
  flex-basis: 100px;
}
#box-center {
  background: orange;
  flex: 1;
  text-align: center;
}
#box-right {
  background: yellow;
  flex-basis: 150px;
  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: grid ★

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

4 방법 3: table-cell ★

<style>
.row {
  width: 100%;
  display: table;
}
.box { display: table-cell; }
.box-a { background: red; width: 50px; }
.box-b { background: orange; }
.box-c { background: yellow; width: 50px; }
</style>

<div class="row">
  <div class="box box-a">A</div>
  <div class="box box-b">B</div>
  <div class="box box-c">C</div>
</div>

5 방법 4: float

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

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

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

6 같이 보기

• HTML div 왼쪽, 오른쪽 배치
• HTML div 왼쪽, 오른쪽 분할
• HTML div 태그
• CSS float
• CSS flex
• 부트스트랩 3단 분할
• HTML div 3단 분할 모바일 1단 반응형
• HTML div 3단 분할 모바일 1단 반응형 여백