為啥我的list_main頁面浮動出錯了呢
<!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>
<link ?href="css/main.css" rel="stylesheet" type="text/css"/>
<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>
</head>
<body>
<div class="top">
? <div class="top_content">
? ? <ul>
? ? ? <li><a href="#">聯系我們</a></li>
? ? ? <li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
? ? ? <li><a href="#" onclick="SetHome(window.location)">設為首頁</a></li>
? ? </ul>
? </div>
</div><!--top結束-->
<div class="wrap">
? <div class="logo">
? ? <div class="logo_left">
? ? ? <img src="images/logo.jpg" alt="慕課網"/>
? ? </div>
? ? <div class="logo_right">
? ? ? <img src="images/tel.jpg" alt="服務熱線"/>
? ? ? 24小時服務熱線：<span class="tel">123-456-7890</span>
? ? </div>
? </div><!--logo結束-->
? <div class="nav">
? ?<div class="nav_left"></div>
? ?<div class="nav_mid">
? ? ?<div class="nav_mid_left">
? ? ? ?<li><a href="#">首頁</a></li>
? ? ? ?<li><a href="list.html">關于慕課</a></li>
? ? ? ?<li><a href="list.html">新聞動態</a></li>
? ? ? ?<li><a href="list.html">課程中心</a></li>
? ? ? ?<li><a href="list.html">在線課程</a></li>
? ? ? ?<li><a href="list.html">人才招聘</a></li>
? ? ?</div>
? ? ?<div class="nav_mid_right">
? ? ? ?<form action="" method="post">
? ? ? ? <input type="text"/ class="search_text">
? ? ? ?</form>
? ? ?</div>
? ?</div>
? ?<div class="nav_right"></div>
? </div><!--nav結束-->
? <div class="ad" id="picBox" style="height:243px">
? ? ?<img src="images/ad.jpg" />
? </div>
? </div><!--ad結束-->
? <div class="list_main">
? ? <div class="news_type"></div>
? ? <div class="list_box"></div>
? </div>
</div><!--wrap結束-->
<div class="copyright">
? <div class="copyright_content">
? ? <ul>
? ? ? <li><a href="#">關于</a>
? ? ? ? ? <ul>
? ? ? ? ? ? <li>品牌故事</li>
? ? ? ? ? ? <li>聯系我們</li>
? ? ? ? ? ? <li>加入我們</li>
? ? ? ? ? ? <li>版權聲明</li>
? ? ? ? ? </ul>
? ? ? </li>
? ? ? <li><a href="#">課程</a>
? ? ? ? ?<ul>
? ? ? ? ? ? <li>PHP開發</li>
? ? ? ? ? ? <li>前端開發</li>
? ? ? ? ? ? <li>JAVA開發</li>
? ? ? ? ? ? <li>Android開發</li>
? ? ? ? ? </ul>
? ? ? </li>
? ? ? <li><a href="#">留言</a>
? ? ? ? ?<ul>
? ? ? ? ? ? <li>新浪微博</li>
? ? ? ? ? ? <li>騰訊微博</li>
? ? ? ? ? ? <li>企業微信</li>
? ? ? ? ? ? <li>QQ空間</li>
? ? ? ? ? </ul>
? ? ? </li>
? ? ? <li><a href="#">關注</a>
? ? ? ? ?<ul>
? ? ? ? ? ? <li>意見反饋</li>
? ? ? ? ? ? <li>問題留言</li>
? ? ? ? ? ? <li>媒體聯絡</li>
? ? ? ? ? ? <li>在線客服</li>
? ? ? ? ? </ul>
? ? ? </li>
? ? ? <li><a href="#"><img src="images/weixin.png"/ alt="微信關注" width="30" height="27">微信關注</a>
? ? ? ?<ul><li><img src="images/qrcode.jpg"/ alt="掃描關注慕課網官方微信" width="102" height="102"></li></ul>
? ? ? </li>
? ? </ul>
? </div>
</div>
</body>
</html>
2015-12-17
你把list_main下面的div元素的width改為百分比試試看
2015-12-17
是不是父級元素的寬度不夠 引起的錯位
2015-12-16
沒啥問題，可能你測試屏幕寬度太小，兩個塊就錯開了
2015-12-16
@charset "utf-8";
/* CSS Document */
*
{
? margin:0;
? padding:0;
? font-size:12px;
}
body
{
? background-color:#F5F5F5;
}
.top
{
? width:100%;
? height:27px;
? background:url(../images/top_bg.jpg) repeat-x; ?
}
.top_content
{
? width:1000px;
? margin:0 auto;
}
.top_content li
{
? list-style-image:url(../images/li_bg.gif);
? float:right;
? width:70px;
? line-height:27px;
}
.top_content a:link,.top_content a:visited
{
?color:#8E8E8E;
?text-decoration:none;
}
.top_content a:hover,.top_content a:active
{
?color:#900;
?text-decoration:none;
}
.wrap
{
? width:1000px;
? margin:0 auto;
}
.logo
{
?height:80px;
?background-color:#FFF;
}
.logo_left
{?
width:200px;
float:left;
}
.logo_right
{
? width:300px;
? float:right;
? height:28px;
? margin-top:30px;
? color:#8E8E8E;
}
.logo_right img
{
vertical-align:middle;
margin-right:10px;
}
.tel
{
font-family:"微軟雅黑";
font-size：16px;
color:#C00;
}
.nav{
height:40px;
}
.nav_left{
width:10px;
background:url(../images/nav_left.jpg) no-repeat;
}
.nav_mid{
width:980px;
background:url(../images/nav_bg.jpg) repeat-x;
? ? }
.nav_right{
width:10px;
background:url(../images/nav_right.jpg) no-repeat;
}
.nav_left,.nav_mid,.nav_right{
float:left;
height:40px;}
.nav_mid_left,.nav_mid_right{
float:left;
}
.nav_mid_left{
width:680px;}
.nav_mid_right{
width:300px;}
.nav_mid_left li{
float:left;
list-style-type:none;
text-align:center;
line-height:40px;
width:100px;
}
.nav_mid_left a:link,.nav_mid_left a:visited{
text-decoration:none;
color:#FFF;
font-size:16px;
font-family:"微軟雅黑";}
.nav_mid_left a:hover,.nav_mid_left a:active{
text-decoration:none;
color:#FF0;
font-size:16px;
font-family:"微軟雅黑";
}
.search_text{
width:190px;
height:25px;
margin-top:5px;
background:url(../images/search.jpg) no-repeat right center ;
background-color:#FFF;
padding-right:25px;
border:1px solid #FFF; ?}
.ad{
height:310px;
overflow:hidden;
}
.main{
height:250px;
background-color:#FFF;
margin-top:5px;
}
.news{
width:340px;
border:1px solid #8E8E8E;
}
.course{
width:410px;
border:1px solid #8E8E8E;
margin:0 7px;
}
.sidebar{
width:230px;
}
.news,.course,.sidebar{
? ? height:250px;
float:left;
}
.title{
height:35px;
border-bottom:2px solid #E8E8E8;
}
.title_left{
width:70%;
font-family:"微軟雅黑";
font-size:14px;
font-weight:bold;
color:#786F66;
float:left;
line-height:35px;
padding-left:20px;
}
.title_right{
width:20%;
float:right;
line-height:35px;
text-align:right;
}
.title_right a {
? ? text-decoration:none;
}
.pic_news{
height:80px;
margin-top:10px;
line-height:22px;
}
.pic_news img,.course_pic img{
float:left;
margin:0 5px;
}
.pic_news a,.course_pic a{
color:#C00;
text-decoration:none;
}
.news_list{
? ? margin-top:20px;
}
.news_list li{
? ? list-style-type:none;
background:url(../images/list.jpg) no-repeat;
padding-left:10px;
margin:8px;
border-bottom:1px dotted #CCC;
}
.news_list a:link,.news_list a:visited{
text-decoration:none;
color:#000;
}
.news_list a:hover,.news_list a:active{
? ? text-decoration:none;
color:#F00;
}
.news_list span{
color:#999;
float:right;
}
.course_pic{
height:120px;
margin-top:10px;
line-height:22px;
}
.course_type{
? ? height:37px;
width:372px;
background:url(../images/product_type_bg.jpg) no-repeat;
margin:20px auto;
}
.course_type li{
? ? list-style-type:none;
float:left;
line-height:37px;
margin:0 15px;
text-align:center;
}
.video{
height:185px;
border:1px solid #E8E8E8;
}
.video_content{
height:150px;
}
.sidebar_ad{
height:55px;
border:1px solid #E8E8E8;
margin-top:10px;
}
.copyright
{
width:100%;
height:200px;
background-color:#E8E8E8;
}
.copyright_content{
width:1000px;
margin:0 auto;
padding-top:20px;
}
.copyright_content li{
? ? list-style-type:none;
float:left;
width:200px;
background:url(../images/line.png) no-repeat right center;
text-align:center;
line-height:30px;
font-family:"微軟雅黑"
}
.copyright_content a{
text-decoration:none;
color:#999;
font-size:18px;
}
.copyright_content li ul li a{
font-size:14px;
}
.list_main{
min-height:350px;
_height:350px;
background-color:#FFF;
margin-top:10px;
}
.news_type{
width:220px;
height:350px;
border:1px solid #E8E8E8;
background-color:#9FC;
float:left;
}
.list_box{
? ? width:770px;
min-height:350px;
_height:350px;
background-color:#F9F;
border:1px solid #E8E8E8;
float:right;
}
2015-12-16
list_main里面啥都沒有啊