我的css排版实践

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>float_clear.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=gbk">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

body {text-align: center;}

div {border: 1px solid black}

.topdiv {width: 960px;margin: 0 auto}

.clearfix:after {

   content: ".";

   display: block;

   height: 0;

   clear: both;

   visibility: hidden;

}

.clearfix {display: inline-block;}

</style>

  </head>

  <body>

   <span>居中显示"margin: 0 auto"即可,ie则需要在body上加上text-align:center</span>

    <div class="topdiv" >

     <div>正确的方法

     <div style="float: none;">top</div>

    <div style="float: left;">left</div>

    <div style="float: left;width: 90%">center</div>

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>    

     </div>

     <div>正确的方法

     <div style="float: none;">top</div>

    <div style="float: left;;width: 8%">left</div>

    <div style="float: left;width: 82%">center</div>

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>    

     </div>

     <div>错误的方法,且浏览器表现不同,right的边框为红色

     <div style="float: none;">top</div>

    <div style="float: left;width: 2%">left</div>

    <div style="float: left;width: 90%">center</div>

    <div style="float: none;width: 8%;border-color: red">right</div>

    <div style="float: none;">bottom</div>    

     </div>

     <div style="">浮动撑出

     <div style="float: none;">top</div>

    <div style="float: left">left</div>

    <div style="float: left;width: 980px">center</div>

    <span class="clearfix">使用clear无效</span>

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>    

     </div>    

     <div style="float: left;">浮动撑出,解决方法--父元素设置float

     <div style="float: none;">top</div>

    <div style="float: left">left</div>

    <div style="float: left;width: 980px">center</div>    

    <div style="float: none;">right</div>

    <div style="float: none;">bottom</div>      

     </div>

     <div >我觉得最好的

     <div style="float: none;">top</div>

     <div style="float: left;">

     一行的使用一个div包含,这样可以做到下面不超出

    <div style="float: left">left</div>

    <div style="float: left;width: 90%">center<br/>

    宽度一般排版的时候会知道,不应该超出,所以最好分配宽度 <br/>    

    122222222222222222222222222222222222222222222222

    122222222222222222222222222222222222222222222222

    1222222222 22222222222222222222222222222222222222

    1222222222222222222222 22222222222222222222222222

    1222222222222222 22222222222222222222222222222222

    122222222222222222222 222222222222222222222222222

    122222222222222222222222222222222222222222222222

    1222222222 22222222222222222222 222222222222222222

    122222222222222222222222222222222222222222222222

    122222222222 222222222222222222222222222222222222

    12222222222222222222222 2222222222222222222222222

    122222222222222222222222222222222222222222222222

    122222222222222222222222222222222222222222222222

    1222222222222222 22222222222222222222222222222222

    122222222222222222222222222222222222222222222222    

    </div>    

    <div style="float: left;">right</div>

    </div>

    <div style="float: none;">换行的话使用float: none;bottom</div>      

     </div>    

    </div>

  </body>

</html>


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1