精华内容
下载资源
问答
  • 如今的网页布局是需要适应于各种屏幕的,因此就需要来实现自适应使得网页中的内容来完全的显示,所以,今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何...

    如今的网页布局是需要适应于各种屏幕的,因此就需要来实现自适应使得网页中的内容来完全的显示,所以,今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何实现。

    我们经常会看到这样的页面,左侧(或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小,这其实就是宽度自适应的实现。

    css宽度自适应中最常见的实现方法有两种,一种是两列布局,另一种是三列布局

    下面我们就来对这两种方法分别简单介绍一下。

    一. css宽度自适应之两列布局:

    我们以右侧宽度固定,左侧宽度自适应为例:

    1、固定宽度区浮动,自适应区不设宽度而设置 margin

    自适应区
    #sidebar {

    float: right; width: 300px;

    }#content {

    margin-right: 300px;

    }

    注意:

    右侧一直固定不动,左侧根据屏幕的剩余大小自适应。

    但实际上这个方法是有局限性的,那就是html结构中sidebar必须在content之前才行。

    2、float与margin配合使用

    自适应区

    固定宽度区
    #content {

    margin-left: -300px; float: left; width: 100%;

    }#content .contentInner{

    margin-left:300px;

    }#sidebar {

    float: right; width: 300px;

    }

    说明:这样实现,contentInner的实际宽度就是屏幕宽度-300px。

    3、固定宽度区使用绝对定位,自适应区设置margin

    我现在的结构是在前面
    固定宽度区
    #wrap{

    position:relative;

    }#content {

    margin-right:300px;

    }#sidebar {

    position:absolute;

    width:300px;

    right:0;

    top:0;

    }

    4、使用display:table实现

    我现在的结构是在前面
    固定宽度区
    #wrap{

    display:table;

    width:100%;

    }#content {

    display:table-cell;

    }#sidebar {

    width:300px;

    display:table-cell;

    }

    注意:这一种方法在IE7以及以下浏览器不兼容,因为IE7设置display为table不识别。

    二. css宽度自适应之三列布局:

    1、固定宽度三列布局

    left
    middle
    right
    *{

    padding: 0;

    margin: 0;

    }

    .div0{

    width: 800px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    margin: 50px auto;

    border: 2px solid #E51414;/*添加边框只为结果更直观*/

    }

    .left{

    width: 200px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    background: #6E6C8A;

    float: left;/*设为左浮动*/

    text-align: center;

    }

    .middle{

    width: 430px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    background: #806155;

    float: left;/*设为左浮动*/

    margin: 0 10px 0 10px;/*左右各加10px使得三列之间有间隙*/

    text-align: center;

    }

    .right{

    width: 150px;

    height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/

    background: #8F9068;

    float: right;/*设为右浮动*/

    text-align: center;

    }

    2、左右固定宽度、中间自适应宽度的三列布局

    left
    middle
    right

    *{

    padding: 0;

    margin: 0;}

    /*.div0{

    width: 800px;

    height: 500px;

    margin: 50px auto;

    position: relative;

    border: 2px solid #E51414;

    }

    可以不要这个父元素div0(即默认父元素为body),如果有,需将这个父元素设置为相对定位*/

    .left{

    width: 200px;

    height: 500px;

    background: #6E6C8A;

    position: absolute;

    top: 0; l

    eft: 0;

    /*设为绝对定位并且与其父元素的top、left距离都为0*/

    text-align: center;

    }

    .middle{

    height: 500px;

    background: #806155;

    margin: 0 160px 0 210px;

    /*左右各加10px使得三列之间有间隙*/

    text-align: center;

    }

    .right{

    width: 150px;

    height: 500px;

    background: #8F9068;

    position: absolute;

    top: 0;

    right: 0;

    /*设为绝对定位并且与其父元素的top、right距离都为0*/

    text-align: center;

    }

    说明:当左右两个div宽度固定,中间的div宽度未知时,使用浮动不能实现三列布局。使用绝对定位才能实现三列布局:需要将左边和右边的元素设置为绝对定位,将中间的元素margin值的左右分别设置为右边元素和左边元素的宽度。不需要父元素的包裹,即可实现三列布局,如果有父元素,需要将父元素设置为相对定位。(关于定位的内容可以参考css手册)

    相关推荐:

    展开全文
  • css宽度自适应

    2020-09-17 16:37:03
    在日常开发中,往往涉及到宽度不存在的情况,或者需要宽度自适应的时候 div需要自适应内容宽度 可以使用到css3的 fit-content;来实现宽度的自适应 例如: width:fit-content; width:-webkit-fit-content;//苹果...

    在日常开发中,往往涉及到宽度不存在的情况,或者需要宽度自适应的时候 div需要自适应内容宽度
    可以使用到css3的 fit-content;来实现宽度的自适应
    例如:

    width:fit-content;
    width:-webkit-fit-content;//苹果浏览器兼容
    width:-moz-fit-content;//火狐浏览器兼容
    
    展开全文
  • div + css宽度自适应(液态布局)

    千次阅读 2014-03-31 14:44:53
    原文地址:http://www.cnblogs.com/anncesky/articles/2633046.html div + css宽度自适应(液态布局) /*左边栏,设定宽度*/ .wrap_l { float: left; width: 150px;

    原文地址:http://www.cnblogs.com/anncesky/articles/2633046.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>div + css宽度自适应(液态布局)</title>
        <style type="text/css">
            /*左边栏,设定宽度*/
            .wrap_l
            {
                float: left;
                width: 150px;
                border: 1px solid #333;
            }
            /*中间栏,宽度auto*/
            .wrap_m
            {
                width: auto;
                margin: 0 140px 0 150px;
                border: 1px solid #000;
            }
            /*右边栏,固定宽度*/
            .wrap_r
            {
                float: right;
                width: 140px;
                border: 1px solid #999;
            }
            </style>
    </head>
    <body>
        <div id="wrap">
            <div class="wrap_l">
                这是左边部分<br />
                这是左边部分<br />
                这是左边部分
            </div>
            <div class="wrap_r">
                这是右边部分<br />
                这是右边部分<br />
                这是右边部分
            </div>
            <div class="wrap_m">
                这是中间部分
            </div>
        </div>
    </body>
    </html>


    展开全文
  • CSS 宽度自适应总结

    千次阅读 2014-04-15 19:12:06
    前些日谈到布局,学长说,你给我写个“一边...情形一:宽度自适应,一列定宽,一列自适应,随窗口大小改变而无滚动条出现。  情形二:高度自适应,创建高度相等的列。 -------------这篇文先说【第一种情况
    前些日谈到布局,学长说,你给我写个“一边固定宽度一边自适应”。我当时有点蒙圈,回去查了些资料现在总结了一下。
    

    1.问题:什么叫做自适应?
        有两种情形,其实这两种还蛮不同的。放在一起来总结吧。
    情形一:宽度自适应,一列定宽,一列自适应,随窗口大小改变而无滚动条出现。

          情形二:高度自适应,创建高度相等的列。


    -------------这篇文先说【第一种情况】吧~ 就考虑左侧定宽200px,右侧自适应咯~----------------------


    2.      思路?
    定宽的列,自然会想到要设置宽度,暂且设置为200px。
    自适应的列,其宽度需为100%。
    高度均为200px,设置背景颜色用来区别两个Div。
    贴上 代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    5. <title>Try</title>
    6. <style type="text/css">
    7.         *{
    8.                 margin: 0;
    9.                 padding: 0;
    10.         }
    11.         #left{
    12.                 width: 200px;
    13.                 height:200px;
    14.                 background-color: red;
    15.         }
    16.         #right{
    17.                 width: 100%;
    18.                 height: 200px;
    19.                 background-color: blue;
    20.         }
    21. </style>
    22. </head>

    23. <body>
    24. <div id = "wrapper">
    25.         <div id = "left">Left</div>
    26.         <div id = "right">Right</div>
    27. </div>
    28. </body>
    29. </html>

    会是什么情形呢?




         不难理解。因为div是块元素,所以左div占据一行,宽度为200px。右侧div占据一行,宽度为100%(相对父元素wrapper)。


       3. OK, 现在【最重要的是】,考虑如何让两者同在一行!!!
        有2种方式:absolute方式和float方式。

     

         4.  absolute方式   
       
         左div设置position:absolute;使其脱离文档流,相对父div的最左绝对定位。它像不存在了一样,于是右div就‘上’来了。

    #wrapper{

     position:relative;

    _height:1%;/*IE6hack*/

    }

    #left{

    position:absoult;

    left:0;

    }

     

        (IE 6在相对定位时有Bug,要给wrapper加个hack。这里就不赘述了。)
             看看效果吧~          
             看到了神马?!!
                对!右div是上来了,可左div无情的把右div的文字挡住了。
             这时候,我们只需要给父div加个padding-left,让右div往右串“左div的宽度”即可。

    #wrapper{

    Padding-left:200px;

    }

    看看效果咯。
             Chrome中


             IE6也如此哦~嘻嘻


             OK,absolute方式完毕,下面介绍float方式。


    5.  float方式:

            这里稍稍调整一下HTML的代码。因为涉及到负margin的问题。
          (大家思考一下为什么要调整顺序,我也是想了好久才想明白的,但是说不太明白~可以调一下顺序再写写CSS,你会更理解的~)
    贴上HTML代码:
    1. <div id = "right">
    2.         <div>Right</div>
    3. </div>
    4. <div id = "left">Left</div>       
    复制代码

    CSS的宽高和上面的例子一样,看看效果。
             



            因为块元素的问题,所以不难理解,两者各占据一行。HTML代码中右div在上,故蓝色的在上,红色在下。
            同样的,如何让2者在一行呢?!
            答案是,浮动呗!

     

    #left{

    float:left;

    }

    #right{

    float:right;

    }

     

    你认为这就会在一行么?
           看看效果
             

                 发现二者还是各占一行。为什么呢?因为右div的宽是100%,就算浮动了,该行也没有左div的位置啊,于是,牛X的负margin就出现了!

    #right{

    margin:0 0 0 -200px;

    }

     

    这句相当于右div的左边留了个200px宽的空儿,说:这地儿让给你们了。于是左div就浮了上来。
             

               又怎么了?
           可是发现左div又给右div挡住了。可以看到HTML中【别具匠心的】在右div里嵌套了一个div,控制它的位置就可以了。

    #right div {

    margin-left:200px;

    }

     

     
    看看效果:
             
             IE6也如此哦~大功告成!


    6.  总结一下吧。
         其实最主要的是,如何让两个Div同处一行,而这两个div有一个的宽度还是特殊的100%。
         浏览器缩放的时候还不能有任何奇怪的事发生哦,这个只有试试才知道!
         要深刻的理解绝对定位absolute和浮动float,此处负margin是重头戏!参考《精通CSS 高级标准web解决方案》

         Over,第一篇技术文分享。有错误的地方,大家敬请指出!!!进步进步进步!!!!!
       
         刚刚还傻傻的用代码发芽网一次次的贴代码来着,原来帖子这样写啊~长见识长见识。。。。。嘻嘻
    展开全文
  • div+css 宽度自适应

    2012-10-12 08:08:30
    div+css三列宽度一样,均分网页宽度,且随浏览器宽度改变而改变。
  • 先来看张图片: 原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。...CSS:*{margin:0;padding:0;}body{padding:10px;font-size:12px;}h1{margin:0;padding:10px0;font-size:14px;font...
  • 宽度自适应达到水平居中在网页制作中很常见而且很实用,本文整理搜集了一些实用的自适应宽度的水平居中技巧,感兴趣前端工程师们可以借鉴一下,或许对你有所帮助
  • 序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%;...
  • div+css实现自适应宽度按钮
  • 这里利用CSS属性,使图片超过展示的宽度后,给图片设置显示最大的宽度。 假如用width属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width属性支持。 假定希望图片显示宽度不超过500像素,...
  • CSS布局 宽度自适应

    2019-07-12 01:21:19
    三列布局,左右两列宽度固定,中间一列宽度自适应 这个很好实现,左右两列分别左浮动和右浮动并给一个固定宽度,中间不浮动,也不设定宽度。这样基本就可以了。但为了兼容IE还必须做些工作。 看下代码结构: ...
  • 主要为大家介绍了CSS实现自适应宽度的菜单按钮效果代码,实例分析了css针对页面自适应宽度的相关设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • PS:css宽度自适应的介绍内容,可以看这篇文章:css自适应布局:css宽度自适应如何实现?首先,我们刚开始设计某些网页板块时,总会给其一个height高度值,让它刚好适合内容大小。我们来看一个具体的实例代码。Title...
  • [CSS]自适应宽度按钮.pdf
  • 主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧...
  • CSS圆角自适应宽度的导航菜单,水平布局的网站菜单,这个菜单的亮点有两个:1、圆角,2、宽度自适应。不管各个菜单项的菜单文字有多长,该项菜单的背景始终自动适合这种变化,完美的宽度自适应特效,值得推荐。
  • 首先,这个这么扯淡又装逼的名字不知道是谁起的,大意就是说:中间的内容随着浏览器宽度的不同,进行宽度自适应操作,而两边的内容固定宽度。来,上个代码演示一下:1 2 *{ 3 margin: 0; 4 pa...
  • css两栏宽度自适应

    2020-04-28 17:45:16
    css两栏宽度自适应 对于做后台管理系统或者一屏页面来说,会涉及到做左右两栏的效果,左边作为导航栏,右边作为主页面。通常情况下,我们首先想到的是使用浮动效果将两栏浮动起来左右放置,但是这样会导致,其中一些...
  • CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。来来来......继续开搞CSS/HTML知识的分享。先来看张图片: 原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角...
  • CSS布局-DIV宽度自适应

    2013-10-23 16:21:55
    经常布局网页,什么情况都会碰到,比如这多个DIV宽度自适应,也就是做液态布局,具体要用到“负值外补侗法(negative margins)。...div + css宽度自适应(液态布局) <!-- body{margin:0;padding:0px;text
  •  宽度自适应:网页元素根据窗口或子元素自动调整宽度  适用百分比进行设置,例如:100% 铺满;50% 占据一般宽度  块元素如果不设置宽度,默认为100%  自适应中可以设置最大或者最小宽度和高度  例如:min-...
  • 如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%;...(高度和宽度相等而高度不能写死) 那就要实现如下的黑科技了 div{ width: 100% height: 0 padding-top: 100% /* paddi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,668
精华内容 16,267
关键字:

css宽度自适应