精华内容
下载资源
问答
  • 如今的网页布局是需要适应于各种屏幕的,因此就需要来实现自适应使得网页中的内容来完全的显示,所以,今天的这篇文章就来给大家介绍一下关于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手册)

    相关推荐:

    展开全文
  • 宽度自适应

    2019-09-09 14:50:28
    给图片添加一个容器将其放进去,为了实现图片的自适应,将此容器height设为0,通过padding-bottom设置宽度比继承其父元素宽度并按照宽度比设置此容器的高度,之后将图片塞进去,图片的一边设置比例另一边也会根据...

    给图片添加一个容器将其放进去,为了实现图片的自适应,将此容器height设为0,通过padding-bottom设置宽度比继承其父元素宽度并按照宽度比设置此容器的高度,之后将图片塞进去,图片的一边设置比例另一边也会根据比例相应的缩放。

    如果不添加容器对图片直接做自适应样式设置,图片的高度为0,高度撑不开也就无法显示出来

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
    <div>   
    <img src='http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg'>
    </div>
    </body>
    </html>
    <style type="text/css">
        div{
            width: 100%;
            height: 0;
            padding-bottom: 55%;/*会根据父元素的宽度实现高度比,此时父元素为body*/
            overflow: hidden;
        }
        img{
           width: 100% 
        }
    </style>
    展开全文
  • 我们之前遇到的"父容器宽度自适应,实现左边子容器宽度固定,右边子容器宽度自适应",很容易实现, 而我们用同样的方法去实现"父容器宽度自适应,如何实现右边子容器宽度固定,左边子容器宽度自适应",就会 发现有问题. ...

    关于盒子容器
    我们之前遇到的"父容器宽度自适应,实现左边子容器宽度固定,右边子容器宽度自适应",很容易实现,
    而我们用同样的方法去实现"父容器宽度自适应,如何实现右边子容器宽度固定,左边子容器宽度自适应",就会
    发现有问题.
    其实我们的方法根本没有问题,又因为我们习惯了先写左边的容器,而后写右边的容器,而浏览器的解析顺序
    是从上到下的,这时候就会出现无论如何我们都无法达到自己的需求.
    详解
    下面就是我们要实现的具体内容
    右边的盒子宽度是固定的,左边的盒子是与自动填充的右边的盒子宽度是固定的,左边的盒子是与自适应的
    HTML


    //右边的盒子必须先进行解析,先把自己的位置站好,否则就会一直被挤下去


    css
    {
    margin: 0;
    padding: 0;
    }
    .father{
    width: 30%;
    height: 180px;
    border: 1px solid #000;
    box-sizing: border-box;
    margin: 100px auto;
    }
    .left{
    /
    width: 100%; */ //这里不能加100%,否则会跟父盒子的宽度一致,被挤下去
    height: 180px;
    background-color: pink;
    overflow: hidden; //清除浮动,只有清除浮动之后,左边的盒子才能自动占据剩余的位置
    }
    .right{
    height: 180px;
    width: 80px;
    float: right;
    background-color: red;
    }

    展开全文
  • 宽度自适应达到水平居中在网页制作中很常见而且很实用,本文整理搜集了一些实用的自适应宽度的水平居中技巧,感兴趣前端工程师们可以借鉴一下,或许对你有所帮助
  • 主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧...
  • Element UI的表格table列的宽度自适应设置

    万次阅读 热门讨论 2018-03-23 16:05:22
    不要设置 width="110px" <el-table-column prop="login_id" align="center" label="工号"> </el-table-column> ...el-table-column prop="login_id" width="110px" align="center" label="工号...

    不要设置  width="110px"

     

    <el-table-column prop="login_id" align="center" label="工号"> </el-table-column>

     

     

     

     
     
    展开全文
  • @media screen and (min-width: 576px) { .ant-legacy-form-item .ant-legacy-form-item-control-wrapper .ant-legacy-form-item-control{ min-width: 120px; width: calc((100vw / 3 - 136px))!...
  • 页面宽度自适应

    2014-06-23 10:36:04
    自己研究的页面宽度自适应页面例子,利用了CSS3新特性,代码简单
  • 主要介绍了js实现文本框宽度自适应文本宽度的方法,可实现根据文本框内容动态改变宽度的功能,涉及javascript动态操作页面元素属性的技巧,需要的朋友可以参考下
  • 一个三栏宽度自适应的实例。有两边栏宽度固定,中间宽度自适应和中间栏宽度固定,两边栏宽度自适应两种。
  • css宽度自适应

    2020-09-17 16:37:03
    在日常开发中,往往涉及到宽度不存在的情况,或者需要宽度自适应的时候 div需要自适应内容宽度 可以使用到css3的 fit-content;来实现宽度的自适应 例如: width:fit-content; width:-webkit-fit-content;//苹果...
  • 两列宽度自适应布局   #left{ width:20%; height:300px; background-color: pink; float:left;} #right{ width:75%; height:300px; background-color: green; float:left;}     *****注意这里设置那个
  • 宽度自适应布局

    千次阅读 2019-03-14 17:05:27
    前端开发中宽度自适应是不可避免的问题,毕竟为了考虑到不同用户的显示终端的尺寸或者在PC端的时候用户主动改变浏览器窗口大小,所以在布局时就需要考虑到自适应宽度的问题。 (如果直接冲UI提供的设计稿开始的话,...
  • WPF 自带的TabControl 没有关闭按钮,需要自己定义增加一个可关闭的按钮,并且tab宽度自适应
  • 自己的一个项目需要用到类似的高度自适应功能,翻看了一下论坛,暂时没有很好的高度自适应代码,所以自己写了一份。...宽度自适应是参考了这位朋友的帖子 https://bbs.125.la/forum.php?mod=viewthreadtid=13927469
  • 主要介绍了微信小程序 图片宽度自适应的实现的相关资料,需要的朋友可以参考下
  • masnory 宽度自适应

    2018-07-30 12:00:11
    当 label想要宽度自适应时 加上下面的话  “Content Compression Resistance”和“Content Hugging” 1.宽度不够时 [_label1 setContentCompressionResistancePriority:UILayoutPriorityRequired ...
  • input宽度自适应

    2020-07-28 15:25:43
    // input宽度自适应 $("input[type='text']").each(function () { var valueLength = $(this).val().length; if (valueLength > 4) { $(this).css('width', valueLength * 12 + 'px') } $(this).keydown...
  • 3列浮动中间列宽度自适应3列浮动中间列宽度自适应3列浮动中间列宽度自适应3列浮动中间列宽度自适应3列浮动中间列宽度自适应3列浮动中间列宽度自适应3列浮动中间列宽度自适应3列浮动中间列宽度自适应
  • 三列自适应等高且中列宽度自适应
  • 本篇文章主要介绍了React根据宽度自适应高度的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • div中input宽度自适应

    2021-03-04 15:26:26
    div中input宽度自适应 style=“width:100%”
  • CSS网页布局入门教程5:二列宽度自适应
  • div宽度自适应内容

    2020-08-16 11:46:44
    div宽度自适应内容 width: fit-content; width: -webkit-fit-content; width: -moz-fit-content; 高度同理将width换成height即可,高度其实本身就是自适应内容的,多数情况不设置,但是在做一些交互效果的时候需要...
  • 宽度自适应的jQuery焦点图特效,图片的边缘与幻灯片区域的背景相融合,在这个思路上模拟实现了不同网页宽度的自适应问题。在使用本款焦点图特效要注意,每张图片的边缘处理要与DIV区域的背景相一致,否则就称不上是...
  • jqgrid表格宽度自适应

    2021-05-14 18:21:53
    //表格宽度自适应 $(function(){ $(window).resize(function(){ $("#list2").setGridWidth($(window).width()); }); }); 上午调试了一下,收缩左侧菜单,右侧jqgrid表格自适应宽度。 上面需要注意的点,我...
  • 宽度自适应&高度塌陷

    2021-05-20 23:01:42
    宽度自适应 width 如果块级元素设置宽度为100%或不设置,宽度默认自适应到整个屏幕宽度(通栏效果) 块级元素不设置宽度的时候,和父级等宽 重点:如果当前元素脱离了文档流,元素的宽度由内容决定→如果元素设置...
  • echarts图表随屏幕的宽度自适应

    万次阅读 多人点赞 2018-10-16 11:48:11
    图表的自适应chart.resize() 有时候会遇到屏幕宽度在变化,而echarts的图表保持原宽度不变的情况: 只需要在图表数据初始化函数之后,再resize()下就可以了。 代码示例: &lt;div class="chart_box"&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,823
精华内容 4,729
关键字:

宽度自适应