Question

我用div布局的时候，为什么2个相同的div出现错位

<div class="szdleft">sss</div>
<div class="szdleft1">sss</div>
<div class="szdright">sss</div>
<div class="sgg">33</div>
<div class="szdleft">sss</div>
<div class="szdleft1">sss</div>
<div class="szdright">sss</div>
css是这样的
.zwfbleft {
display: inline;
float: left;
height: 300px;
width: 473px;
margin-top: 5px;
margin-right: 4px;
border: 1px solid #CCCCCC;
}
.zwfbright {
display: inline;
float: right;
height: 300px;
width: 473px;
margin-top: 5px;
border: 1px solid #CCCCCC;
margin-left: 4px;
}
.sgg {margin:0 auto;
display: inline;
float: left;
height: 100px;
width: 958px;
margin-top: 5px;
margin-bottom: 5px;
}

Answer 1

我刚刚看了下 你给出的CSS样式 我只看到了中间的"sgg"样式 而你说的两个相同的样式 你没有写出来 也就是说 你两个相同的样式可能是因为他的宽度出了问题
如果 <div class="szdleft">sss</div>
<div class="szdleft1">sss</div>
<div class="szdright">sss</div> 这三个的宽度加起来只有958 那么 这三个DIV 的外面得套一个DIV
如
<div>
<div class="szdleft">sss</div>
<div class="szdleft1">sss</div>
<div class="szdright">sss</div>
</div>
你这样试试 可能对你有帮助

Answer 2

一结果
1：不同的浏览器会对css作出不同解析，得到的结果不尽相同。（题外话：我对国内使用的遨游浏览器不太了解，但是感觉好像也是ie内核，因为我在测试的时候ie6跟遨游会显示同一个结果）

你确定你在这几次测试中使用的都是同一种浏览器么？ie6,火狐，ie7显示出的div结果会不尽相同。在火狐狸看到的结果很好，但是有可能在ie8里面的现实一塌糊涂。

解决方案。对于不同的浏览器请使用 css hack 解决，很简单。
color:red;//火狐认识这个，火狐会执行它
*color:black;//ie6认识这个，火狐不会认识前面那个*，火狐不执行这个
*color:white !important;//ie7认识* 也认识 后面的 !important,但是其他2个浏览器会忽略掉它，所以ie7会执行它。

2：分辨率问题，也是css问题，比如你的div布局总宽为1000px.那么在1024*768以上分辨率的显示器显示出的结果不会有大问题，但是800*600就会发生错位。
对于这一问题请用javascript+css 对当前用户的分辨率做出判断，然后对于不同的分辨率引入支持相应分辨率的css文件。

学习网页布局也不是很容易的，有时候为了支持多浏览器，会花去很多的时间，需要耐心。

Answer 3

你写的什么 我都看不懂呀！ .sgg 就这个css选择器定位到div 其它css都白写。
估计你的div是可能由于 sgg里面的float: left; 才会错位。
你可以在sgg的css里加 clear:both;
可能是你要的效果！

Answer 4

你div里面和css里面的名都不一样 css里面zwfbright div里面szdright 这样css里面的根本就无效。

Answer 5

字打错了啦你；你样式名字是zwfbleft这些，class用的又是szdleft，你叫浏览器怎么找啊。