你的位置:首页 > 软件开发 > 网页设计 > float实例讲解

float实例讲解

发布时间:2016-02-13 20:00:08
float实例讲解float是个强大的属性,在实际前端开发过程中,人们经常拿它来进行布局,但有时,使用的不好,也麻烦多多啊。比如,现在我们要实现一个两列布局,左边的列,宽度固定;右边的列,宽度自动扩展。效果图见下:思路:利用div+float,div1为左边的列,div2为右边的 ...

float实例讲解

float是个强大的属性,在实际前端开发过程中,人们经常拿它来进行布局,但有时,使用的不好,也麻烦多多啊。

比如,现在我们要实现一个两列布局,左边的列,宽度固定;右边的列,宽度自动扩展。

效果图见下:

float实例讲解

思路:利用div+float,div1为左边的列,div2为右边的列,将div1的宽度设置为固定宽度并将其设置为左浮动,脱离文档流;div2在普通流中就ok了。

具体代码和效果图见下:

float实例讲解float实例讲解
<!DOCTYPE html>  <head>    <title>width_layout</title>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>    <style type="text/css">      .content {        min-width:300px;      }      .div1 {        width:200px;        height:300px;        background:green;        float:left;      }      .div2 {        height:300px;        background:pink;      }    </style>  </head>  <body>    <div class="content">      <div class="div1"></div>      <div class="div2"></div>    </div>  </body></html>

原标题:float实例讲解

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录