你的位置:首页 > 软件开发 > 网页设计 > 抛砖引玉之宽度自适应布局

抛砖引玉之宽度自适应布局

发布时间:2016-02-18 22:00:21
抛砖引玉之宽度自适应布局什么是宽度自适应布局呢?就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局。常见的宽度自适应布局有:1、 两列:左边宽度不变,右边宽度自适应2、 三列:左右两边宽度不变,中间部分自适应3、 三列:左右两边宽度自适 ...

抛砖引玉之宽度自适应布局

什么是宽度自适应布局呢?

就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局。

常见的宽度自适应布局有:

1、  两列:左边宽度不变,右边宽度自适应

2、  三列:左右两边宽度不变,中间部分自适应

3、  三列:左右两边宽度自适应,中间部分不变

一、利用div+css实现以上“自适应布局”

(1)两列:左边宽度固定,右边宽度自适应

利用div+float+margin,已在随笔‘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;        margin-left:200px;      }    </style>  </head>  <body>    <div class="content">      <div class="div1"></div>      <div class="div2"></div>    </div>      </body></html>

原标题:抛砖引玉之宽度自适应布局

关键词:

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

可能感兴趣文章

我的浏览记录