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黑客或捕获PHP输出并使用正则表达式：）

- Alex

---

你能否通过JavaScript向.column元素添加类？ - Sampson

是的，但我真的想避免这样的解决方案。在布局修复之前会有一个“延迟”。 - Alex

我同意，但你说你不能“添加类或任何东西”，但你考虑了“使用JavaScript黑科技”的想法，所以我假设你没有访问CSS / Markup的权限，但你可以访问脚本。 - Sampson

Answer 1

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

1. 使用CSS3弹性盒子。
2. 在列上设置display: table-cell;，在容器上设置display: table-row;。

- coreyward

---

表格显示方法很好，但似乎不起作用，我得到了一列在另一列上面。使用table-cell/table-row有任何限制吗？ - Alex

没事了，我刚才得去掉一个 float，现在它可以工作了。可能在 IE 中不行，但是我不在意。谢谢！ - Alex

实际上，从IE8开始，表格显示模式应该可以正常工作。您可以在Quirksmode（http://www.quirksmode.org/css/display.html）上检查整个兼容性表以及更多信息。 - coreyward

Answer 2

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

有一些非常烦人的问题：

1. 这假设#container中唯一的div是那些带有"class"名称为"column"的div。
2. 这假设列没有边框、填充或边距。
3. 你可能会遇到子像素问题，因为它依赖于百分比。 当然，如果你只使用一个或两个列，这可能不是问题。

肯定有一些仅使用CSS的方法也可以在IE6中工作。我感觉到了，只是找不到。

- sdleihssirhc