当前位置：首页 → 问答吧 → CSS定位小问题

CSS定位小问题

时间：2011-09-22

来源：互联网

刚开始学习CSS ，三列自适应代码，有两个问题
1、红字部分层的顺序是side side1 main,一旦把顺序换成side main side1 ，显示就不正常，side1层就被挤到下面去了。
2、在ie6下，三个层之间不是紧挨着的有明显的空隙，看网上说是IE63像素BUG，需要加_margin-right:-3px;，但我加了显示依然不正产，这里面需要加到哪一个层下?
具体代码如下：
<head>
<style type="text/css">

</style>
</head>

<body>
<div id="side">此处显示左侧边的内容</div>
<div id="side1">此处显示右侧边的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>

[ 本帖最后由 manbudezhu 于 2011-9-22 15:29 编辑 ]

附件

2011-9-22 15-17-29.png (404 Bytes)

2011-9-22 15:20

图片

作者: manbudezhu 发布时间: 2011-09-22

#side 和 #side1 这两个div标签会不会还存在一些默认的属性没有重置呢，比如默认的 margin 值。
检查一下看看，这个结构比较清晰和简单，用Firebug排查一下，应该能很快找到问题。

作者: phantom 发布时间: 2011-09-22

#main 没有加宽度也就是自动，他如在第二位置时，他宽度就是#side 到浏览器右侧之间。
#side1他是右浮动的，所以显示在右边。

空隙问题是IE6默认的 margin 值，楼上已说了。
可以这样解决
body,div{margin:0;padding:0;}

作者: xuxiong 发布时间: 2011-09-22

第一条应该是float定位的原则造成的，具体的我也不懂，只能说下我的理解。float虽然会取消块元素占据一整行的特性，使元素不在占位，但它不会影响在它前面的元素的定位，只会以它原本应该在的位置为基准做调整。把side1写在main之后，由于main没有取消占位的属性，它会把上面那一整行都占据，在它后面写的side1自然只能在下面一行去定位了，而side1只有一个float:right;的属性，所以也就显示为在下面一行居右了。
至于第二条，给左右浮动的side side1分别添加_margin-right:-3px; _margin-left:-3px; ，另外，main的margin调小点，改成0 117px就行了。

不过我测试的时候，发现一个奇怪的问题，就是把main的margin值去掉或者设成0，显示也会正常，这点很奇怪啊，float不占位的话，应该会遮挡住下面的内容才对，谁能给解惑下？

作者: ypd007 发布时间: 2011-09-22

CSS定位小问题

附件

热门阅读

热门下载