Css 在3列流体布局中，如何将主容器的宽度保持在最大宽度？

我有一个3列流体（100%宽度）布局。 我需要在单击时隐藏列，而主容器保持最大宽度

想象一下，下面是我的布局：

-------------------------------------------------------
|           |                             |           |
| Col 1     |    Main container (Col 2)   |  Col 3    |
| (20%)     |        (60%)                |  (20%)    |
|(or 100px) | This is a paragraph in which|(or 100px) |
|           | some text is written.       |           |
-------------------------------------------------------

如果单击第1列，我需要有以下布局：

------------------------------------------------------
|                                         |           |
|      Main container  (Col 2)            |  Col 2    |
|         (80%)                           |  (20%)    |
| This is a paragraph in which some text  |(or 100px) |
| is written.                             |           |
------------------------------------------------------

------------------------------------------------------
|                                                    |
|                 Main container (Col 2)             |
|                    (100%)                          |
| This is a paragraph in which some text is written. |
|                                                    |
------------------------------------------------------

然后，如果我单击第3列，我需要有以下布局：

------------------------------------------------------
|                                         |           |
|      Main container  (Col 2)            |  Col 2    |
|         (80%)                           |  (20%)    |
| This is a paragraph in which some text  |(or 100px) |
| is written.                             |           |
------------------------------------------------------

------------------------------------------------------
|                                                    |
|                 Main container (Col 2)             |
|                    (100%)                          |
| This is a paragraph in which some text is written. |
|                                                    |
------------------------------------------------------

如何编写css样式以使主容器扩展到最大可能宽度

---

以下是我目前编写的代码（这不是我真正想要的）

显示

div

内联….

display:table

将有助于取代

float

，并在周围没有

div

时扩展

---

确保给出

max width

…这将决定一个div应该扩展多少…

您应该真正了解CSS3 Flexbox模块

您的HTML结构：

<div class="container">
   <div class="col1"></div>
   <div class="col2"></div>
   <div class="col3"></div>
</div>

---

运行在

上的完整示例您能告诉我更多吗。。。因为它在我自己身上工作得很好。感谢Germain和NoobEditor。两个答案都很完美。我选择NoobEditor的答案是因为Flexbox在IE9中不被认可