CSS display table, table-cell

CSS display table, table-cell

1 예시[ | ]

html

Copy

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

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

2 예시 2[ | ]

html

Copy

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

3 같이 보기[ | ]