我会让自己适应
52framework.com所提供的. (HTML5,CSS3,JS框架)
尽管观看了网格教程视频并检查了其他 demo源代码,但我无法理解为什么使用框架< div class =“clear”>< / div><! - clear - >代码在第12行.
尽管观看了网格教程视频并检查了其他 demo源代码,但我无法理解为什么使用框架< div class =“clear”>< / div><! - clear - >代码在第12行.
以下代码的地址是:http://demo.52framework.com/demos/framework/grid.html
<body> <div class="row"> <header> <div class="logo col_7 col">52framework</div><!-- logo col_7 --> <nav class="col_9 col"> <ul> <li><a href="#navigation">navigation 1</a></li> <li><a href="#navigation">navigation 2</a></li> <li class="last"><a href="http://www.enavu.com">enavu network</a></li> </ul> </nav><!-- nav col_9 --> <div class="clear"></div><!-- clear --> </header> </div><!-- row --> ...
以下代码也来自同一来源,但如您所见< div class =“clear”>< / div><! - clear - >尽管这里已经完成了更多的分区,但这里没有使用这段代码.
<!-- this section shows off the grid and how it can be used --> <section class="row" id="grid"> <h2>Grid Framework</h2> <div class="col col_8"> col_8 <div class="row"> <div class="col col_1">col_1</div> <div class="col col_7">col_7 <div class="row"> <div class="col col_3">col_3</div> <div class="col col_4">col_4</div> </div><!-- row --> </div> </div><!-- row --> </div><!-- col_8 --> <div class="col col_8"> col_8 <div class="row"> <div class="col col_4">4</div> <div class="col col_4">4</div> </div><!-- row --> </div><!-- col_8 --> <div class="col_16 col" style="margin-top:15px;"> <div class="row"> <div class="col col_9">col_9</div> <div class="col col_7">col_7</div> </div><!-- row --> </div><!-- col_16 --> <div class="col_16 col"> <a href="http://www.52framework.com/documentation/" class="documentation">Grid Framework Documentation</a> </div><!-- col_16 --> </section><!-- row -->
相关的CSS代码:
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;} .col { margin-left:10px; margin-right:10px; display: inline; overflow: hidden; float: left; position: relative; } .row{ width: 960px; margin: 0 auto; overflow: hidden; } .row .row { margin: 0 -10px; width: auto; display: inline-block; } /* Column widths,and element width based on grid */ .col_1,.width_1 { width:40px; } .col_2,.width_2 { width:100px; } .col_3,.width_3 { width:160px; } .col_4,.width_4 { width:220px; } .col_5,.width_5 { width:280px; } .col_6,.width_6 { width:340px; } .col_7,.width_7 { width:400px; } .col_8,.width_8 { width:460px; } .col_9,.width_9 { width:520px; } .col_10,.width_10 { width:580px; } .col_11,.width_11 { width:640px; } .col_12,.width_12 { width:700px; } .col_13,.width_13 { width:760px; } .col_14,.width_14 { width:820px; } .col_15,.width_15 { width:880px; } .col_16,.width_16 { width:940px; }
解决方法
这是一种用于
clear the
float
property导航通过其.col类获得的方法.如果没有这个,你的nav元素后面的内容可能会出现在你的nav元素旁边而不是它下面.
如需进一步阅读,请参阅Chris Coyier的The How and Why of Clearing Floats.