css布局之左侧固定宽度,右侧自适应

原创 2018年04月16日 12:50:39

css布局之左侧固定宽度,右侧自适应

1、固定宽度区浮动,自适应区设置margin
给左边的固定宽度区left浮动并设置一个宽度,右边的自适应区right只设置margin值,假设right的宽度是100%,那么设置margin后,它得宽度就变为100%-margin;left发现自己的宽度可以和right挤在同一行,它就浮动上来了。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                overflow:hidden;/*清除浮动*/
            }
            #left{
                float:left;
                width:300px;
                background:red;
            }
             #right{
                margin-left:310px;
                background:#666;
           }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>宽度自适应</title>
    </head>
    <body>
        <div id="main">
            <!--这种方法必须把固定宽度区写在前面,否则布局不了-->
            <div id="left" style="height:400px;">content我是固定宽度区</div>
            <div id="right" style="height:300px;">sider我是自适应区</div>

        </div>
        <div id="footer">footer</div>
    </body>
</html>

这里写图片描述
这里写图片描述
记得清除浮动,这样不管left和right谁更长,footer都不会错位,不会对布局造成影响;
但是,这种方法必须让固定宽度区写在自适应区前面。

<div id="main">
   <div id="left" style="height:300px;">left我是固定宽度区</div>
   <div id="right" style="height:400px;">right我是自适应区</div>
</div>

2、固定宽度区使用绝对定位,自适应区设置margin
若想把自适应区right写在前面,给right设置margin值,需要给left固定宽度区设置绝对定位,在此之前把父元素main设置为相对定位relative,让left的绝对定位是相对于main而不是相对于整个网页。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            div{
                margin:0;
                padding:0;
            }
            #main{
                position:relative;
            }

            #left{
                position:absolute;
                top:0;
                left:0;
                width:300px;
                background:red;
            }
              #right{
                margin-left:310px;
                background:green;
           }

            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>宽度自适应</title>
    </head>
    <body>
        <div id="main">
            <div id="right" style="height:300px;">right我是自适应区</div>
            <div id="left" style="height:400px;">left我是固定宽度区</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

这里写图片描述
这里写图片描述

固定宽度的绝对定位只能满足自己,对其他的毫无益处,footer不受left固定高度绝对定位的影响,只受right自适应区的影响。
3、标准浏览器方法
w3c标准提供的制作这种自适应宽度的标准方法:把main设为display:table并指定宽度100%,然后把left和right设为display:table-cell;然后只给left指定一个宽度,那么right的宽度就变成自适应了。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
        <style type="text/css">
            #main{
                display:table;
                width:100%;
            }
            #left{
                display:table-cell;
                width:300px;
                background:red;
            }
              #right{
                display:table-cell;
                background:green;
           }
            #footer{
                height:50px;
                background:#ccc;
                margin-top:10px;
            }
        </style>
        <title>宽度自适应</title>
    </head>
    <body>
        <div id="main"> 
            <div id="left" style="height:200px;">content我是固定宽度区</div>
            <div id="right" style="height:300px;">sider我是自适应区</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

这里写图片描述
这种方法对IE7及之前版本无效,若不考虑IE7及其之前版本则使用标准方法,若不考虑固定宽度区和自适应区的顺序,则使用第一种方法。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/betty13006159467/article/details/79959149

在vb中轻松制作支持断点续传的FTP、HTTP下载软件

在VB中制作支持断点续传的下载软件很简单,只要使用《金锋下载控件》就可轻松做到。控件下载地址:http://www.jinfengnet.com该控件:支持HTTP、FTP两种协议,支持断点续传,支持...
  • jinfengnet
  • jinfengnet
  • 2001-05-10 00:54:00
  • 1165

【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px,左侧content自适应。 本来直接用float,发现aside总是会...
  • qq846294282
  • qq846294282
  • 2016-12-20 17:06:36
  • 2126

左侧固定宽右侧自适应(CSS布局面试题)

左侧固定宽度,右边自适应 这是一个很常用的css布局,尤其是在后台页面当中,使用频繁。...
  • u011456552
  • u011456552
  • 2017-06-08 23:40:15
  • 1580

两栏布局,左侧固定宽度,右侧自适应大小

html代码如下: CSS布局 第一种方式*{margin:0;
  • u012193330
  • u012193330
  • 2016-05-31 23:02:51
  • 4490

实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px

原题目:牛客网-阿里巴巴2016前端开发工程师笔试(一):10题 要求自适应,那一开始就不能把左侧content的宽度给设死了。尝试了几次一开始思维定式就先从左至右写吧,于是 .content...
  • zhangluo123__
  • zhangluo123__
  • 2017-04-27 23:43:16
  • 385

css实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。 这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应...
  • yongzhen150
  • yongzhen150
  • 2015-12-01 09:21:53
  • 1577

两列布局——左侧宽度固定,右侧宽度自适应的两种方法

今天做了一个练习,要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单,毕竟只是练习,但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满...
  • jiadluo
  • jiadluo
  • 2015-08-24 15:35:54
  • 4370

CSS实现左侧固定宽度右侧自适应的固比布局

CSS实现左侧固定宽度右侧自适应的固比布局三种方案:1、 box1使用diaplay:table; display:table-cell; 配合calc 实现。 2、 box2使用dispaly:fl...
  • u010035608
  • u010035608
  • 2016-07-26 16:20:15
  • 884

左边div固定宽度,右边div宽度自适应

http://www.zhihu.com/question/37208845 body{ padding: 0px; margin:...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2016-05-17 23:34:11
  • 684

左侧固定宽度,右侧自适应宽度铺满剩余屏幕

1、第一种办法 Document *{ margin: 0; padding: 0; } .left{ width: 200px; float: left; b...
  • zx_p24
  • zx_p24
  • 2016-11-23 13:53:04
  • 1401
收藏助手
不良信息举报
您举报文章:css布局之左侧固定宽度,右侧自适应
举报原因:
原因补充:

(最多只允许输入30个字)