html - 居中弹力 block 难排版

Question

我有 3 个 block :一个 wrapper 和 wrapper 内的另外 2 个。内部 block 具有相同的大小。

Wrapper 是 flex 的，它的宽度在窗口调整大小时会发生变化。包装内的 2 block 也有 flex 。这 2 个内部 block 中的每一个都具有 min-width 属性。

当 wrapper 足够宽时，内部 block 一个接一个地排在一行中。但是当 wrapper 变得太窄时， block 被定位在 2 行中。

您可以在下图中看到最终目标:

alt text http://img155.imageshack.us/img155/9006/nessview.png

重要时刻:正如您在第三个 block 中看到的那样，当 block 位于两行时，它们在中心对齐。

问题:是否可以仅使用 html 和 css 来进行这种修饰？

Answer 1

像这样的东西对我来说在 IE 7 和 FF 3 中有效:

<div style="width: 49%; min-width: 300px; float: left; background: red;">Test</div>
<div style="width: 50%; min-width: 300px; float: left; background: blue">Test</div>

问题是它在缩小时不会居中对齐，而 IE 6 讨厌最小宽度。

仍在研究居中对齐...

仅限 Firefox:

<div style="text-align: center">
  <div style="display: inline-block; width: 49%; min-width: 300px; margin: 0 auto; background: red;">Test</div>
  <div style="display: inline-block; width: 50%; min-width: 300px; margin: 0 auto; background: blue;">Test</div>
</div>