chrome vs IE:谨慎使用float属性

最新推荐文章于 2018-10-26 17:44:12 发布

harveofhust

最新推荐文章于 2018-10-26 17:44:12 发布

阅读量2.3k

点赞数

文章标签： chrome float ie div css header

本文链接：https://blog.csdn.net/harveofhust/article/details/5965406

版权

在页面布局这块，目前流行的做法是div+css。用div把页面分成几块，然后用css来控制这几块在页面上的排列，从而达到我们的块状布局。我这里并不准备做一个正式的网页，只是想说一下自己在布局时遇到的一些趣事。

1.准备一个简单的html页面

这个页面只有几个div,没有任何的文字内容。代码如下：

当然这只是第一步，如果在浏览器器里显示，我保证你看不到任何东西。

2。让页面变的块起来

下面显示的是我想达到的页面效果，不同的块用了不同的颜色标注，每个块的边框也进行加粗。

3. chrome vs IE：第一回合

css代码如下:

<mce:style type="text/css"><!-- body{ width:930px;; margin: 0px auto 0px auto; } #header{ border-width: 1px; border-style:solid; height:50px; display:block; background-color:black; } #container{ border-width: 1px; border-style:solid; display:block; background-color:green; } #left{ width:200px; margin-left:5px; display:block; float:left; border-width: 1px; border-style:solid; height:100px; background-color:red; } #right{ margin-right:5px; width:700px; display:block; border-width: 1px; border-style:solid; height:200px; background-color:white; }

chrome:

IE:

4.第二回合

下面的css代码是以第3步中的为基准，只给出改动部分。

#container{ border-width: 1px; border-style:solid; display:block; overflow:hidden; background-color:green; } #right{ margin-right:5px; width:700px; display:block; float:left; border-width: 1px; border-style:solid; height:200px; background-color:white; }

chrome: