Question

我在一周前从桌面设计跳到了css，之后又开始阅读更多关于它的信息。昨天，我在这里看了一篇很长的帖子，那里的海报正在敲响花车，以及它们是如何贬值的。有很多关于inline-block被使用的讨论。

我有一个我刚刚完成的HTML5设计，它在firefox和chrome中看起来很棒但是当从运行Internet Explorer版本7,8和9的其他计算机进行测试时，设计绝对爆炸。它似乎对我来说，我在这个设计中所提出的任何东西都没有在IE中得到尊重。它似乎只是包裹在它左边的任何东西。

我想知道我是否可以使用花车，或者我应该使用inline-block代替。如何将两个div彼此相邻，其中一个位于左侧，另一个位于右侧，使用inline-block将是一个很好的例子。

我还有另一个困境，希望有人可以帮助我。我在运行XP SP1的旧开发机器上。我可以测试的最好的IE浏览器是6.我想以某种方式获得一些东西，允许我测试版本7,8和9（如果它还没有，则为10）。有人可以为此推荐任何解决方案吗？

Answer 1

花车从未用于布局。

它们只是意味着拿一个元素，把它放在一边，让其他内容围绕它。就是这样。

那么我们为什么要将它们用于布局？

因为您可以清除两个浮动列下方的页脚，所以浮动布局应运而生。如果曾经有过“清除”元素的方法在下面定位的元素，我们从来没有打扰过使用花车布局。

为什么我们仍在使用它们进行布局？

因为更好的替代方案，例如CSS Flexible Box Layout Module和CSS Template Layout Module仍在制定工作草案，并且不受所有浏览器支持。

为什么你的设计会在IE 7,8和9中断？

您的代码可能存在问题，即您没有正确使用浮动代码。这不完全是你的错，因为它们从来就不是用于布局的。但是，我可以向你保证他们的工作。我一直使用花车进行布局很长时间，并且总是能够在大多数浏览器中使用它。

内联块更好吗？

可以使用内联块完成许多可以使用浮点数完成的布局。但是，它们并不能解决每个布局问题，也不适用于布局。我发现其中一个通常更适合预期的布局。

参考

Floats Don’t Suck If You Use Them Right

Answer 2

这个问题来自2012年，其他答案已经过时。

浮点数不应再用于布局（尽管您仍可以将其用于原始目的-在图像周围浮动文本）。

Flexbox现在得到了广泛的支持，并且更适合布局。

Answer 3

浮动应该可以正常工作，虽然这取决于你如何使用它 - 如何链接到你的设计？

内联块在小于8的Internet Explorer版本中无法正常运行：http://www.quirksmode.org/css/display.html

Answer 4

您可以在内联

中使用此示例

<div id="firstdiv">
    That is the first div
</div>
<div id="seconddiv">
    That is the second div
</div>

的style.css

 #firstdiv{
        display:inline;
        background-color: #f00;
    }

    #seconddiv{
        display:inline;
        background-color: #00f;
    }

它将在IE8及更高版本上运行但是如果你想在IE6和7中使用它在style.css中生成以下代码

#firstdiv{
    display:block;
    background-color: #f00;
    float: left;
}

#seconddiv{
    display:block;
    background-color: #00f;
    float: right;
}

如果您使用HTML5和CSS3并希望它与IE6一起使用，请阅读以下文章5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress

你也可以阅读那篇文章，它非常有用difference between block, inline and inline-block

漂浮不好吗？在它的位置应该使用什么

4 个答案: