CSS3 : how to create 3 flexible columns?

Question

我的目标是创建一个 3 列布局:

• 第一列可以取任意宽度:它会通过 JS 改变
• 第二列尽可能多地占用空间
• 第三列固定宽度

#red {
  background-color:red;
  display:inline-block;
  width:100px; /* this can change */
}
#green {
  background-color:green;
    display:inline;
	width:100%; /* this should take ALL the place available */
	
}
#blue {
  background-color:blue;
    display:inline-block;
	width:200px; /* this is fixed width */
}

<div id="container">
	<div id="red">red</div>
    <div id="green">green</div>
    <div id="blue">blue</div>
</div>

这可能没有任何 JS 吗？

Answer 1

我会使用显示表。兼容 IE8+。

#container {
        display: table;
        width: 100%;
        height: 300px;
    }
    
    #red {
        display: table-cell;
        width: 100px;
        background: red;
    }

    #blue {
        display: table-cell;
        background: blue;
    }

    #green {
        display: table-cell;
        width: 100px;
        background: green;
    }

<div id="container">
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
</div>