Question

这个真的是我的山羊。我需要将Container1和Container 2向右浮动，让它们像现在一样彼此对接。我还需要将Container2中的项目向右浮动，以便它们相互堆叠。问题是如果我在Container2中设置任何内容（示例文本2，示例文本3）向右浮动它会使Container2宽度为100％或者其他东西。

这可以通过给Container2一个特定的宽度来解决，但这是不可能的，因为所有这些都是动态内容。我需要容器2来增长，因为我将内容堆叠起来。

这有什么办法吗？它只是ie7中的一个问题所有其他浏览器似乎都没问题。这让我很生气。

<div>
    <div style="width: 100px; height: 100px; background: green; float: left;">
    </div>
    <div id="Container1" style="height: 100px; border: 1px solid #000000; float: right;">
        sample text 1
    </div>
    <div id="Container2" style="height: 100px; border: 1px solid #000000; float: right;">
        <div style="float: right; border: 1px solid #FF0000;">sample text 2</div>
        <div style="float: right; border: 1px solid #00FF00;">sample text 3</div>
    </div>
</div>

Answer 1

我无法在Internet Explorer 7中找到此错误的修复程序。

可能有一个，我不知道。我尝试了所有常用的技巧。

以下是使用display: inline-block的一些重写代码。

它看起来与IE8中的your old code相同，并且在IE7 / 8和其他现代浏览器中是一致的。耶！

请参阅： http://jsfiddle.net/SUPhf/

有许多事情需要注意：

请参阅以下链接，了解display: inline-block：
- 特别是：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
- 还有：http://www.brunildo.org/test/inline-block.html
我不得不交换源代码中元素的顺序，以保持视觉显示不变。
当您使用display: inline-block时，HTML中的空格非常重要。
- 将上面的完全固定链接与此版本进行比较，其中唯一的更改是额外的空格：
  http://jsfiddle.net/SUPhf/1/

现在您已经意识到这些警告，这应该没问题。

ie7浮右父宽度问题

1 个答案: