Home > Article > Web Front-end > Please tell me why float is needed here! _html/css_WEB-ITnose
Please tell me why float is needed here! _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:571138browse
Why does this code need to use floats? The element cannot come out without floating it. Am I using it this way? Please give some expert advice and give me some details
<!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>
Reply to the discussion (solution)
.youbian .s{
height: 70px;
width: 310px;
background: #1223a3;
float: left;
.youbian .s{
height: 133px;
width: 310px;
background: #616351;
float: left;
}
You wrote 2 .s
You can do it without floating
You can’t get out without floating
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to remove defined styles in CSS_html/css_WEB-ITnoseNext article：How to remove defined styles in CSS_html/css_WEB-ITnose