为了账号安全,请及时绑定邮箱和手机立即绑定

为啥我的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>


正在回答

5 回答

你把list_main下面的div元素的width改为百分比试试看

0 回复 有任何疑惑可以回复我~

是不是父级元素的宽度不够 引起的错位

0 回复 有任何疑惑可以回复我~

没啥问题,可能你测试屏幕宽度太小,两个块就错开了

0 回复 有任何疑惑可以回复我~

@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;

}


0 回复 有任何疑惑可以回复我~

list_main里面啥都没有啊

0 回复 有任何疑惑可以回复我~
#1

qq_放纵你江湖_0 提问者

我知道,是样式的问题吗我只是在作页面,你帮我看看我的list_main样式有没有问题,,在我的评论,,,样式回复不了太多了嘿嘿
2015-12-16 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为啥我的list_main页面浮动出错了呢

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号