首页 >web前端 >html教程 >请教这里为什么需要用上浮动!_html/css_WEB-ITnose

请教这里为什么需要用上浮动!_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:54:571168浏览




代码这为什么需要用上浮动?不用浮动元素出不来,我这样用对吗?请教各位高手指点一下说详细点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head>     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />     <title>模仿京东</title> </head><style type="text/css" media="screen">*{  margin: 0px;  padding: 0px;}    .top{            width:100%;            height: 30px;            background: #eee;        }   #ad{    margin: 0 auto;    display:block;    margin-top: 10px;  }    .sousuo{        width: 1210px;        height: 90px;        background: #1f5aa8;        margin: 0 auto;        margin-top: 10px;    }    .daohang{            width: 1210px;            height: 40px;            background: #666;            margin: 0 auto;            margin-top: 10px;    }    .main{                height: 410px;        width: 1210px;        border: 2px solid orange;        margin: 10px auto;    }    .main .zuobian{        background: #DB7093;        height: 410px;        width: 209px;        float: left;    }    .zhongjian{                width: 690px;        height: 410px;        float: left;        /*margin:2px;*/        background: #D8BFD8;            }    .zhongs{            width: 671px;            height: 240px;            background: red;            margin-left:10px;                }    .zhongx{            width: 671px;            height: 150px;            background:#0096ff;              margin-left: 10px;                }.youbian{        height: 410px;    width: 310px;    background: #315a63;    float: left;}.youbian .s{                height: 70px;        width: 310px;        background: #1223a3;float: left;         }.youbian .s{height: 133px;width: 310px;background: #616351; float: left;}.youbian .z{    height: 137px;    width: 310px;    background: #0096ff;     float: left;}.youbian .x {    height: 137px;    width: 310px;    background: #e4e4e4;    float: left;}</style> <body><!-- 顶部开始 -->     <div class="top"> </div><!-- 顶部结束 --><!-- 广告开始 --><img src="gg.jpg" alt="我是广告哈哈哈哈" id="ad"><!-- 广告结束 --><!-- sousuo的部位 --><div class="sousuo">     </div><!-- sousuo结束 --><!-- 导航开始 --><div class="daohang">    </div><!-- 导航结束 --><div class="main">    <div class="zuobian">        </div>    <div class="zhongjian">        <div class="zhongs"></div>        <div class="zhongx"></div>    </div>    <div class="youbian">        <div class="s"></div>        <div class="z"></div>        <div class="x"></div>    </div></div> </body> </html> 


回复讨论(解决方案)

 
.youbian .s{
 
         
        height: 70px;
        width: 310px;
        background: #1223a3;
float: left;
          
}
 
 
 
.youbian .s{
 
height: 133px;
width: 310px;
background: #616351;
 float: left;
}
 

你写了2个 .s

不用浮动也可以啊

不用浮动也可以啊

不浮动是出不来的
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn