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

浮动出现异常

http://img1.sycdn.imooc.com//57d927590001702d13630668.jpg为什么我的浮动样式成这个样子了?谁能告诉我。

<style type="text/css">

*{margin:0 ;padding:0;font-size:14px;list-style:none;font-family:Verdana, Geneva, sans-serif,"宋体";color:#323232}

h2{

line-height:20px;

border-bottom:1px solid #cce6f5;

margin-bottom:10px;

}

h2 span{float:right;}

h2 span a{font-size:12px;font-weight:normal;}

#wrap{

margin:0 auto;

width:910px;

}

#header,#container{

width:100%;

overflow:hidden;

margin-bottom:10px;

}

.logo{

margin:5px;

width:100%;

overflow:hidden;

}

.logo h1{

background:url(../images/logo.gif) no-repeat;

height:66px;

width:218px;

float:left;

text-indent:-99px;

cursor:pointer;

}

.logo dl{

float:right;

marign:10px;

}

.logo dt{

font-weight:bold;

line-height:30px;

color:#5a5a5a;

}

.logo dd{

font-size:12px;

color:#999;

line-height:24px;

}

#nav{

width:100%;

background:url(../images/navbg.gif) no-repeat;

float:left;

height:36px;

}

#nav ul{

margin:0;

padding:0;

list-style-type:none;

overflow:hidden;

}

#nav li{

display:inline;

float:left;

font-weight:bold;

font-color:white;

line-height:36px;

margin:0 20px;

}

#nav li a{

color:#FFF;

}

#nav a:link,a:visited{

text-decoration:none;

}

#nav li.app{

background:url(../images/home.gif) 0 4px no-repeat;

text-align:center;

width:88px;

}

#nav li.app a{color:#000;}

#nav li.suv{

float:right;

background:url(../images/arrow_r.gif) 0px  8px no-repeat;

padding-left:25px;

}

.content{

float:left;

width:600px;

}

.photo{margin:12px 2px;}

.box{width:100%;overflow:hidden;margin-bottom:15px;}

.list{width:100%;overflow:hidden;}

.list li{width:100%;margin-bottom:15px;overflow:hidden;}

.list li dl{float:left;padding-left:45px;}

.list li dt{font-size:12px; color:#828282; line-height:26px;}

.list li dt a{font-weight:bold;text-decoration:underline;margin-right:10px;}

.list li dt a:hover{text-decoration:none;}

.list li dd{line-height:24px;}

.list li span{float:right; font-size:12px; color:#630063; margin-top:5px;}

.list li span a{text-decoration:underline; font-size:12px; color:#63C}

.list li span a:hover{text-decoration:none;}

.new{background:url(../../style/images/new.gif) right 5px no-repeat;padding:10px;}

.download{background:url(../../style/images/downicon.gif) 0 6px no-repeat;padding:3px 0 0 15px;}

.soft_1{background:url(../../style/images/icon_1.gif) 0  5px 0 no-repeat;}

.soft_2{background:url(../../style/images/icon_2.gif)  no-repeat;}

.soft_3{background:url(../../style/images/icon_3.gif) 0 5px   no-repeat;}

.soft_4{background:url(../../style/images/icon_4.gif) 0 5px no-repeat;}

.soft-5{background:url(../../style/images/icon_5.gif) 0 5px no-repeat;}

.soft_6{background:url(../../style/images/icon_6.gif) 0 5px no-repeat;}

.sidebor{float:right;width:280px;}

.sidebor li a{font-size:12px;color:#06C;}

.newlist{width:100%;}

.newlist li{line-height:22px;}

.downlist{width:100%;overflow:hidden;}

.downlist li{width:100%;overflow:hidden;line-height:25px;padding-left:23px;margin-bottom:5px;}

.downlist li span {float:right;color:#039;font-size:12px;}

.downlist li span a{font-size:12px;text-decoration:underline;}

.downlist li span a:hover{text-decoration:none;}

.picture_1{background:url(../../style/images/soft_r_1.gif) no-repeat;}

.picture_2{background:url(../../style/images/soft_r_2.gif) 0 5px no-repeat;}

.picture_3{background:url(../../style/images/soft_r_3.gif) 0 5px no-repeat;}

.picture_4{background:url(../../style/images/soft_r_4.gif) 0 5px no-repeat;}

.picture_5{background:url(../../style/images/soft_r_5.gif) 0 5px no-repeat;}

.picture_6{background:url(../../style/images/soft_r_6.gif) 0 5px no-repeat;}

</style>


</head>


<body>

<div id="wrap">

<div id="header">

<div class="logo">

<h1><a href="#">腾讯软件中心</a></h1>

        <dl>

            <dt>

            腾讯软件中心,腾讯精品软件展示平台

            </dt>

            <dd>

            我们会不断提升产品的性能和体验,为您提供最好用的软件!

            </dd>

        </dl>

</div>

</div>

<div id="nav">

<ul>

    <li class="app"><a href="#">首页</a></li>

        <li><a href="#">PC产品大全</a></li>

        <li><a href="#">Mac产品大全</a></li>

        <li><a href="#">无线产品大全</a></li>

        <li><a href="#">企业产品大全</a></li>

        <li class="suv"><a href="#">QQ实验室</a></li>

    </ul>

</div>

</div>

<div class="container">

<div class="content">

<img src="../images/banner.png" width="600" height="200" class="photo" />

    <div class="box">

    <h2>

        <a href="#">腾讯软件</a>

                <span>

                <a href="#">更多>></a>

                </span>

        </h2>

        <ul class="list">

        <li>

            <dl class="soft_1">

                <dt><a href="#">QQ5.2</a>更新日期: 2014-03-17</dt>

                    <dd>免费的即时通讯平台,带来更多沟通乐趣。</dd>

                </dl>

                <span>

                <a href="#" class="download">下载</a>| <a href="#">官方网站</a>

                </span>

            </li>

            <li>

            <dl class="soft_2">

                <dt>

                    <a href="#" class="new">腾讯电脑管家</a>

                    更新日期:2014-1-15

                    </dt>

                    <dd>专业的免费杀毒软件,全面便捷管理电脑。</dd>

                </dl>

                <span>

                <a href="#" class="download">下载</a>|<a href="#">官方网站</a>

                </span>

            </li>

            <li>

            <dl class="soft_3">

                <dt>

                    <a href="#">软件管理</a>更新时间: 2014-01-27

                    </dt>

                    <dd>下载软件,就用软件管理</dd>

                </dl>

                <span>

                <a href="#" class="download">下载</a>|<a href="#">官方网站</a>

                </span>

            </li>

            <li>

            <dl class="soft_4">

                <dt>

                    <a href="#" class="new">QQ音乐2014贺岁版</a>更新时间: 2014-01-24

                        <dd>全新界面设计,视野更开阔,操作更简单</dd>

                    </dt>

                </dl>

                <span>

                <a href="#" class="download">下载</a>|<a href="#">官方网站</a>

                </span>

            </li>

            <li>

            <dl class="soft-5">

                <dt>

                    <a href="#">QQ浏览器</a>

                    更新时间:2014-03-13

                    </dt>

                    <dd>全新设计,简约轻快,精巧易用</dd>

                </dl>

                   <span>

                <a href="#" class="download">下载</a>|<a href="#">官方网站</a>

                </span>

            </li>

            <li>

            <dl class="soft_6">

                <dt>

                    <a href="#">QQ影像</a>更新时间:2014-01-24

                    </dt>

                    <dd>管理、浏览、编辑、上传一站体验</dd>

                </dl>

                   <span>

                <a href="#" class="download">下载</a>|<a href="#">官方网站</a>

                </span>

            </li>

        </ul>

    </div>

</div>

<div class="sidebor">

<div class="box">

<h2>最新动态</h2>

    

<ul class="newlist">

    <li>&middot;<a href="#">腾讯电脑管家8.0正式版发布</a></li>

        <li>&middot;<a href="#">腾讯游戏平台首推强加速、LOL助手永久免费</a></li>

        <li>&middot;<a href="#">微云2.0六大终端全新出击,超强收藏功能</a></li>

        <li>&middot;<a href="#">腾讯手机管家(PC版)2.0新版 只为用户更好体验</a></li>

        <li>&middot;<a href="#">QQ影音3.7发布,提升转码速度</a></li>

        <li>&middot;<a href="#">QQ2012 Beta2(Q+):全新Q+,更快更便捷</a></li>

        <li>&middot;<a href="#">Foxmail 7发布新版本,支持繁、简、英多语言</a></li>

    </ul>

</div>

<div class="downlist">

<div class="box">

<h2>

    <a href="#">更多推荐</a><span><a href="#">更多>></a></span>

    </h2>

    <ul>

    <li class="picture_1">

        <a href="#">QQ旋风</a>

            <span><a href="#" class="download">下载</a></span>

        </li>

        <li class="picture_2">

        <a href="#">腾讯视频播放器</a>

            <span><a href="#" class="download">下载</a></span>

        </li>

    </ul>

</div>

</div>

</body>

</html>



正在回答

2 回答

你div用的太乱了,一个个都对不上,刚才匹配了一下,给你补一个

</div>
<div class="container">

把这个删掉就好了,

div嵌套出问题了


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

试试把.sidebor设为相对定位。.box的margin-right设置为零,和绝对定位试试

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

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214672    人
  • 解答问题       1833    个

让你精通CSS中三大定位机制,彻底掌握网页布局的相关知识

进入课程

浮动出现异常

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

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

帮助反馈 APP下载

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

公众号

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