CSS - 自动div宽度

Question

我有html结构，可以根据页面上下文进行更改。在某些页面上看起来像：

<div class="container">
  <div class="column">
    blah
  </div>    
</div>

其他人：

<div class="container">
  <div class="column">
    blah
  </div>    
  <div class="column">
    blah
  </div>    
</div>

因此，容器的流体宽度（100％）。

.column div也是流动的，并且在第一个例子中应该具有其容器的宽度，即。 100％， 在第二个例子中，宽度为50％并向左对齐。

喜欢：

----------------------------
|                           |
|         column1           |
|                           |
-----------------------------

和

----------------------------
|            |              |
|  column2   |  column2     |
|            |              |
-----------------------------

我该怎么做？

我还应该注意，我无法更改column1 / column2中的任何标记（无法添加类或类似的东西，可能只使用javascript hacks或捕获php输出并使用正则表达式：）

Answer 1

我可以想到两种解决方案。

1. 使用CSS3 flex box。
2. 将列设置为列上的display: table-cell;和容器上的display: table-row;。

Answer 2

我能想到的最好的是JavaScript：http://jsfiddle.net/V5Au7/。

一些非常恼人的陷阱：

1. 这假设#container中唯一的div是类名为“column”的div。
2. 这假设列没有边框，填充或边距。
3. You could run into sub-pixel problems, by relying on percentages.当然，如果只坚持一两列，这可能不会成为问题。

必须有一些CSS才能在IE6中运行。我能感觉到，我找不到它。