剑轩

应无所住,而生其心

博主信息

排名

文章

860

粉丝

112

163

文章类别

CSS 16篇

微服务 41篇

Git 15篇

.NET 106篇

移动开发 33篇

软件架构 26篇

.NET Core 120篇

.NET MVC 11篇

英语 3篇

随笔 106篇

Bootstrap 3篇

Redis 21篇

编辑器 10篇

Js相关 15篇

虚拟化 8篇

实现一边固定，一边自适应宽度的布局

7425人阅读 2020/8/20 16:19 总访问：5194144 评论：3 收藏：0 手机

分类: CSS

如果是使用网格系统可以参考：https://www.tnblog.net/aojiancc2/article/details/4886
更多实现可以参考：https://www.tnblog.net/notebook/article/details/7790

使用flex布局的情况下，需要自定义宽度的div增加一个flex-grow:1即可

<div class="row">
    <div class="" style="flex-grow: 1; height: 500px;background:#000">
    </div>
    <div  style="background-color: #131313;height:500px;width:306px">
    </div>
</div>

这里外面的class="row",是bootstrap中使用了flex布局的

不用flex布局的情况下

有些时候用flex布局上面这样做，内容的动态改变会有点影响它，所以可以使用下面这种方法来做

1:左边固定宽度，右边自适应

<html>
<head>
    <title>Document</title>
    <style>

        baibody {
            margin: 0;
        }


        .stage {
            position: relative;
        }


        .left {
            position: absolute;
            left: 0;
            top: 0;
            background-color: #ffabcd;
            width: 200px;
            height: 500px;
        }


        .right {
            margin-left: 200px;
            background-color: #abcdff;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
</body>
</html>

看看效果：

2:左边自适应宽度，右边固定宽度

<html>
<head>
    <title>Document</title>
    <style>

        baibody {
            margin: 0;
        }


        .stage {
            position: relative;
        }


        .right {
            position: absolute;
            right: 0;
            top: 0;
            background-color: #131313;
            width: 300px;
            height: 500px;
        }

        .left {
            margin-right: 300px;
            background-color: orange;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
</body>
</html>

好了，效果就不贴了，继续听试讲了

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈网格系统没有合适的宽度怎么办，比如col-3太短col-4又太宽

👉使用dplayer进行视频播放

评价

画不尽晚风

2020/8/20 17:07:38

一个被后端耽误的前端设计师 [嘻嘻]

剑轩:@画不尽晚风哈哈哈，没办法哇，最近这段时间都在写样式....

2020/8/21 9:10:09 回复

困困

2022/2/24 20:51:43

就很棒 [熊猫]

实现一边固定，一边自适应宽度的布局

画不尽晚风

困困

css弹性盒子，flex布局

可输入下拉文本框，据输入，动态加载数据 jquery-editable-select

.net mvc分部页，.net core分部页

css中单位pxem，rem和vh/vw的理解

让IIS支持webp格式图片让IIS支持vtt格式，iis设置mime类型，iis配置支持的类型

网页上传文件断点续传的实现，无视文件大小上传，以及datatables基本用法

如何使用图标像使用文字一样，使用文本图标的方法

使用七牛云的cdn服务，提高图片的加载速度

通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core?

JS监听input、keydown，有输入法时打字完成后触发事件

数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG，因为当前没有数据库备份

修改了css后，让浏览器从缓存中更新

C MVC RedirectToAction跳转时候传递参数，Action之间传值

当你工作遇到以下几种状态时，请果断跳槽走人

C与Java二进制编码转换，补码