漂浮不好吗？什么应该用在它的地方

我已经从表格设计跳到css，大约一周前，并且从那以后一直在阅读更多的内容。昨天，我在SO上看到一个很长的帖子，那里的海报正在敲花车，他们是如何贬值的。有很多关于inline-block正在使用的地方。漂浮不好吗？什么应该用在它的地方

我有一个HTML5设计，我刚刚完成，它在firefox和chrome中看起来棒极了，但是从运行explorer版本7,8和9的其他计算机进行测试时，绝对设计爆炸。它似乎对我来说，我已经漂浮在这个设计中的任何东西都不在IE中。它似乎包裹在它的左边。

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

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

来源

2012-03-19 Muzz

虽然根据[仪器法]（http://en.wikipedia.org/wiki/Law_of_the_instrument），可能会有更好的替代方法，但根本没有弃用。请链接到您的来源。 – zzzzBov 2012-03-19 19:49:15

我会看看我能否找到它。 – Muzz 2012-03-19 19:50:51

固体阅读在IE浏览器，以及它如何处理浮动元素：http://css-class.com/articles/explorer/floats/floatandcleartest1.htm – MetalFrog 2012-03-19 19:51:15

花车从来没有打算进行布局。

他们只是想要一个元素，把它放在一边，让其他内容流动它。就这样。

那么，我们为什么要使用它们进行布局？

因为你可以清除页脚空两列浮动，浮动布局应运而生。如果有一种方法可以“清除”定位元素下方的元素，我们就不会费心使用浮点数来布局。

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

因为更好的选择，如CSS Flexible Box Layout Module和CSS Template Layout Module仍在工作草案，并不支持所有浏览器。

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

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

内联块更好吗？

可以用浮动块完成的许多布局都可以使用内嵌块完成。但是，它们不能解决所有布局问题，它们也不适用于布局。我发现其中一个通常会更适合预期的布局。

参考

Floats Don’t Suck If You Use Them Right

来源

2012-03-19 20:15:45 melhosseiny

你几乎总结了我昨晚找到的那篇文章。你是对的，海报是敲花车布局设计。问题：我正在使用html5进行此设计，我正在使用带有背景图像的'

'标签。为什么不在IE中显示背景图片？ – Muzz 2012-03-19 20:18:47

我有一个预感，你忘了使用[HTML5启用脚本]（http://remysharp.com/2009/01/07/html5-enabling-script/）和现代[CSS重置]（http：// meyerweb .com/eric/tools/css/reset /）来说明HTML5显示角色。 – melhosseiny 2012-03-19 20:37:31

我实际上使用最初的开发人员的最新重置脚本。（我不记得他的名字）。现在为HTML启用脚本，我没有使用谷歌的脚本，但我的头标签中有这些：'<！ - [if lt IE 7]> <！ - [if IE 7]> <！ - - [if IE 8]> <！ - [if ie IE 8]><！ - '这是行吗？ – Muzz 2012-03-19 20:45:15

浮动应该工作正常，但它取决于您如何使用它 - 如何链接到您的设计？

inline-block的不在Internet Explorer版本小于8正常工作：http://www.quirksmode.org/css/display.html

来源

2012-03-19 19:50:31 callumacrae

谢谢Callum。我还没有发布这些页面。该网站位于本地机器上。 – Muzz 2012-03-19 19:53:37

您可以在线使用本示例

<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中使用它a ND 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

来源

2012-03-19 20:25:32

谢谢你的例子和链接。看看这个，'inline'和'inline-block'有什么区别？ – Muzz 2012-03-19 20:30:56

你可以阅读文章它将有助于http://dustwell.com/div-span-inline-block.html这是一个不错的 – 2012-03-19 20:42:29

感谢您的最后一个链接，它真的让我直！ – Muzz 2012-03-19 20:51:40

漂浮不好吗？什么应该用在它的地方

回答

相关问题