Question

我有3个块：一个包装器和另外两个包装器内部。内部块具有相同的大小。

包装材料具有弹性，在窗口调整大小时其宽度会发生变化。包装内的2个块也是弹性的。这两个内部块中的每一个都具有最小宽度属性。

当包装纸足够宽时，块内的块一个接一个地放在一行中。但是当包装变得太窄时，块被放置在2行中。

您可以在下面的图片中看到最终目标：

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

重要时刻：正如您在第三个区块中看到的那样，当区块位于2条线中时，它们会在中心位置。

问题：是否可以使用 html和css进行化妆？

Answer 1

这样的东西适用于IE 7＆amp; 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>

Answer 2

如果我理解你的问题，你希望外箱永远不会变得那么狭窄，两个内部的位置是否相互叠加？

也将最小宽度放在外框上，它等于两个内部最小宽度，填充，边距和边界的总和。你也可以假装在IE6中拥有最小宽度，这样：

min-width: 200px;
width: auto!important;
width: 200px; /* The last one will be used by IE6 (as min-width), the !important one by standards compliant browsers */

也适用于最小高度。

带有中心弹性块的难以页面化妆

2 个答案: