61,112
社区成员
发帖
与我相关
我的任务
分享请教一个怪问题，下面这段CSS在IE中好好的，但在GOOGLE Chrome中死活不行，我调测了无数次，请指导小弟一下
请教一个怪问题，下面这段CSS在IE中好好的，但在GOOGLE Chrome中死活不行，我调测了无数次，请指导小弟一下，弄了一天了。问题就出在 clearBoth 这个样式上，本来这个样式是做为换行用的清除DIV浮动状态的样式，在IE7中正常，但在GOOGLE Chrome却空出老大一块，弄了一天，郁闷不已，求各位大大指点。
<html>
<head>
<style>
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
float: left;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
}
</style>
</head>
<body>
<div class="userInfo">
</div>
<div class="chartPanel">
<div style="float: left;">
sasadf</div>
<div class="clearBoth">
</div>
<div style="float: left;">
sasabbbbbbbbbbbbbbbbbbbbbdf</div>
</div>
<div class="clearBoth">
</div>
<div class="userInfo">
</div>
<div class="chartPanel">
<div style="float: left; height: 40px; background: red;">
aaa</div>
<div style="float: left; height: 40px; background: blue;">
bbbbbbbbbbbbb</div>
<div class="clearBoth">
</div>
<div style="float: left; height: 40px; background: yellow;">
aaa</div>
<div style="float: left; height: 40px; background: green;">
bbbbbbbbbbbbb</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
小昭 2012-02-27
- 打赏
- 举报
个人觉得用以下的HTML结构会更合理些，也不需要清浮动什么的了
<style>
*{ margin:0; padding:0}
.chartPanel dl{ overflow:auto;}
.chartPanel dt{ float:left;height: 40px; background: red;}
.chartPanel dd{float:left;height: 40px; background: blue;}
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
float: left;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
height:0;
}
</style>
</head>
<body>
<div class="userInfo">
</div>
<div class="chartPanel">
<div style="float: left;">
sasadf</div>
<div class="clearBoth">
</div>
<div style="float: left;">
sasabbbbbbbbbbbbbbbbbbbbbdf</div>
</div>
<div class="clearBoth">
</div>
<div class="userInfo">
</div>
<div class="chartPanel">
<dl>
<dt>aaa</dt>
<dd>bbbbbbbbbbbbb</dd>
</dl>
<dl>
<dt style="background: yellow;">aaa</dt>
<dd style="background: green;">bbbbbbbbbbbbb</dd>
</dl>
</div>
</body>
oggmm 2012-02-24
- 打赏
- 举报
按你的效果帮你改了一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.userInfo
{
width: 430px;
height: 300px;
border: 1px solid #eee;
position:absolute;
left:0;
top:0;
}
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
}
.clearBoth
{
clear: both;
}
.outbox{clear:both; float:left; width:100%; position:relative;margin-bottom:10px; }
.red{ float:left;height:40px; background:red;}
.blue{ float:left;height:40px; background:blue;}
.yellow{float:left; height:40px; background:yellow;}
.green{ float:left;height: 40px; background:green;}
</style>
</head>
<body>
<div class="outbox">
<div class="userInfo">
</div>
<div class="chartPanel">
<div>
sasadf
</div>
<div class="clearBoth">
sasabbbbbbbbbbbbbbbbbbbbbdf
</div>
</div>
</div>
<div class="outbox">
<div class="userInfo">
</div>
<div class="chartPanel">
<div class="clearBoth">
<div class="red">
aaa
</div>
<div class="blue">
bbbbbbbbbbbbb
</div>
</div>
<div class="clearBoth">
<div class="yellow">
aaa
</div>
<div class="green">
bbbbbbbbbbbbb
</div>
</div>
</div>
</div>
</body>
</html>
oggmm 2012-02-24
- 打赏
- 举报
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
float:left;
}
这个样式加上float:left;就可以解决你的问题 但请调整你的margin的数值到你所需要的值，它是以它左边的那个userinfo为参考点 我觉得这不是你需要
你的结构很有问题
多个元素在一行应该都要定义float排列在一行，同一行的那两个div应该用一个大的div包起来
还有就是如果你要换行 你直接对你需要换行的元素定义clear:both;就好了，没必要加一个<div class="clearBoth">这样的元素在那，有时候我们加这个元素是为撑开兼容才用的
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
float:left;
}
这个样式加上float:left;就可以解决你的问题 但请调整你的margin的数值到你所需要的值，它是以它左边的那个userinfo为参考点 我觉得这不是你需要
你的结构很有问题
多个元素在一行应该都要定义float排列在一行，同一行的那两个div应该用一个大的div包起来
还有就是如果你要换行 你直接对你需要换行的元素定义clear:both;就好了，没必要加一个<div class="clearBoth">这样的元素在那，有时候我们加这个元素是为撑开兼容才用的
