首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

html清除浮动后样式依旧异常。如何破,求解

2013-09-07 
html清除浮动后样式依旧错误。。怎么破,求解html代码如下: div classright clearfixdiv classtop

html清除浮动后样式依旧错误。。怎么破,求解
html代码如下:
 <div class="right clearfix">
    <div class="top">
        <ul class="clearfix">
            <li>夜空中最亮的星 |</li>
                <li>送别 |</li>
                <li>没有什么不同 |</li>
            
            </ul>
        
        
        </div>
        <div class="bott clearfix">
        <ul class="clearfix">
        <li><img src="img/1.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/2.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/3.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/4.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/5.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/6.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/7.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/10.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/15.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            
        
        </ul>
        
        
        </div>
    
   

</div>

css样式代码如下:

.right{
float:right;

}

.right .top{
width:750px;
height:60px;


line-height:60px;
border:2px solid #F66;
margin-bottom:15px;

}

.top ul{
padding-left:15px;

}

.top ul li{
float:left;
width:240px;
margin-bottom:15px;
border:1px solid #3CC;



}

.right .bott{

width:750px;
border:2px dashed #F3C;
padding-top:20px;

}
.bott ul{
margin-bottom:20px;
}

.bott ul li{
float:left;

margin-bottom:20px;
margin-left:20px;

height:220px;
width:220px;

}
.bott ul li img{

width:220px;
height:220px;

}

.footer{
margin:auto 30px;
background:#3F6;


}


.clearfix:after{
content".";
display:block;
height:0px;
clear:both;
visibility:hidden;

显示的结果是我右边部分的框压根就没有框住所有的li。。。图片传不上。。郁闷


[解决办法]


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.right{
float:right;
}

.right .top{
width:750px;
height:60px;
line-height:60px;
border:2px solid #F66;
margin-bottom:15px;
}

.top ul{
padding-left:15px;
}

.top ul li{
float:left;
width:240px;
margin-bottom:15px;
border:1px solid #3CC;
}
.bott{
float:left;
width:750px;
border:2px dashed #F3C;
}
.bott ul{
float:left;
margin:0;
padding:0;
list-style:none;
background-color:#f00;
}
.bott li{
float:left;
margin:0;
padding:10px;
height:220px;
width:220px;
background-color:#ddd;
}
.bott li img{
width:220px;
height:220px;
background-color:#fff;


border:1px solid #ccc;
display:block;
}
.footer{
margin:auto 30px;
background:#3F6;
}
.clearfix:after{
content".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
</style>
</head>

<body>
<div class="right clearfix">
    <div class="top">
        <ul class="clearfix">
            <li>夜空中最亮的星 
[解决办法]
</li>
                <li>送别 
[解决办法]
</li>
                <li>没有什么不同 
[解决办法]
</li>
            
            </ul>
        
        
        </div>
        <div class="bott">
        <ul>
        <li><img src="img/1.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/2.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/3.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/4.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/5.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/6.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/7.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/10.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/15.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
        </ul>


        </div>
</div>

</body>
</html>


[解决办法]
<div class="bott">
            <ul>
            <li><img src="img/1.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/2.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/3.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/4.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/5.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/6.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/7.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/10.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            <li><img src="img/15.jpg" alt="html清除浮动后样式依旧异常。如何破,求解"></li>
            </ul>
 <!-- 一般我是这样弄 -->
            <div style="clear:both"></div>
  </div>
[解决办法]
当你想子盒子浮动时,最好也设置父盒子浮动,让它们在同一层次上,,父盒子的大小才会跟着改变,

热点排行