当前位置: 首页 > news >正文

CSS 实现两边固定宽,中间自适应


0.  **Flexbox 实现**:

    ```
    css复制代码.container {
        display: flex;
    }
    ​
    .fixed {
        width: 200px; /* 两边固定宽度 */
    }
    ​
    .flexible {
        flex: 1; /* 中间自适应 */
    }
    ```

    ```
    html复制代码<div class="container">
        <div class="fixed">Left</div>
        <div class="flexible">Center</div>
        <div class="fixed">Right</div>
    </div>
    ```

0.  **Grid 实现**:

    ```
    css复制代码.container {
        display: grid;
        grid-template-columns: 200px 1fr 200px; /* 两边固定宽度,中间自适应 */
    }
    ```

    ```
    html复制代码<div class="container">
        <div class="fixed">Left</div>
        <div class="flexible">Center</div>
        <div class="fixed">Right</div>
    </div>
    ```


http://www.lryc.cn/news/421590.html

相关文章:

  • C#图片批量下载Demo
  • 部署Springboot + Vue 项目到远程服务器Windows10系统的详细配置
  • 智驭灌区,科技领航—— 高效灌区信息化系统管理平台
  • 下载免费设计素材,有这7个网站就够了
  • 【漏洞复现】某赛通数据泄露防护(DLP)系统 NetSecConfigAjax SQL注入漏洞
  • c++中的仿函数
  • springboot整合mybatis-plus和pagehelper插件报错,
  • 趋动科技荣登「AIGC赋能金融创新引领者TOP20」
  • SOPHGO算能科技BM1684盒子占用空间满的问题解决
  • Spring Boot实用小技巧 - - 第523篇
  • 安卓App开发 篇二:Android UI和布局
  • k8s基本介绍
  • go http启动应用程序
  • Redis:概念、部署、配置、优化
  • 华为OD-D卷找座位
  • Go sdk下载和配置环境变量
  • qt的项目结构
  • 【NLP】文本特征处理:n-gram特征和文本长度规范
  • ESP32人脸识别开发 ---partitions.csv配置的一些说明(五)
  • 【学习笔记】Matlab和python双语言的学习(图论最短路径)
  • vue.config.js 配置 devserve 配置
  • 不入耳耳机什么牌子性价比高?五大年度必选款揭秘
  • SQL Zoo 6.The JOIN operation
  • 视频教程:Vue3移动端抽屉弹层组件实战
  • CSS 的 BFC(块级格式化上下文)
  • 【2023年】云计算金砖牛刀小试2
  • python--将mysql建表语句转换成hive建表语句
  • 异步调用实践:Async,Future, TaskExecutor、EventListener
  • Flask 异常处理
  • 【海思SS626 | 内存管理】海思芯片的OS内存、MMZ内存设置