關于clearBoth在GOOGLE Chrome中的問題解決方法

2024-07-11 08:29:22

字體：大中小

來源：轉載

供稿：網友

下面這段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>

如下的樣式：

復制代碼

代碼如下:
.chartPanel
{
border: 1px solid #eee;
height: 300px;
margin: 0 0 0 440px;
float:left;
}

上面的樣式加上float:left;就可以解決這個問題，但需要請調整margin的數值到所需要的值，它是以它左邊的那個userinfo為參考點，多個元素在一行應該都要定義float排列在一行，同一行的那兩個div應該用一個大的div包起來，還有就是如果要換行，直接對需要換行的元素定義clear:both;就好了，沒必要加一個
這樣的元素在那，有時候我們加這個元素是為撐開兼容才用的。
詳解代碼如下:

復制代碼

代碼如下:
<!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>

上一篇：css 中的background:transparent到底是什么意思有什么作用

下一篇：js 解決隱藏與顯示div的相關問題

發表評論

共有條評論