[HTML + CSS] DIV 태그 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>

 

 

 

flex라는게 안드로이드의 weight랑 같은 기능이네요

 

 

출처 : http://zetawiki.com/wiki/HTML_div_3%EA%B0%9C_%EC%99%BC%EC%AA%BD-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%98%A4%EB%A5%B8%EC%AA%BD_%EB%B0%B0%EC%97%B4