5.左侧不动,右侧自适应

一:运用BFC的overflow:hidden

    <style>
        .left {
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }

        .main {
            background-color: blue;
            height: 200px;
            overflow: hidden;
            /* 要加 否则自适应元素包括浮动元素 */
        }
    </style>
<body>
    <div class="left">左侧不动</div>
    <div class="main">右侧自适应</div>
</body>

二:给右侧自适应盒子加margin-left:不动盒子的宽度

    <style>
        .left {
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }

        .main {
            margin-left: 100px;
            background-color: blue;
            height: 200px;
        }
    </style>
<body>
    <div class="left">左侧不动</div>
    <div class="main">右侧自适应</div>
</body>

三:有一个共同的父元素,给他设置高度500px,设置相对定位;padding-left:不动元素的宽度,,  左侧元素设置宽高并相对定位 top:0;left:0; 右侧元素只设置高度

    <style>
        .father {
            height: 500px;
            position: relative;
            padding-left: 100px;
            background-color: pink;
        }
        .left {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 0;
            left: 0;
        }
        .main {
            background-color: blue;
            height: 200px;

        }
    </style>
    <div class="father">
        <div class="left">左侧不动</div>
        <div class="main">右侧自适应</div>
    </div>

四:利用display:flex给父元素设置为弹性盒子,左侧宽度写死,右侧占所有剩余空间

容器的高度是根据最大的那个来确定的

    <style>
        .father {
            height: 500px;
            background-color: pink;
            display: flex;
        }

        .left {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .main {
            background-color: blue;
            height: 200px;
            flex: 1;
        }
    </style>
    <div class="father">
        <div class="left">左侧不动</div>
        <div class="main">右侧自适应</div>
    </div>

五:父元素display: table;  子元素 display: table-cell;

    <style>
        .father {
            display: table;
        }
        .left {
            display: table-cell;
            background-color: aqua;
        }
        .main {
            width: 100%;
            display: table-cell;
            background-color: blue;
        }
    </style>
    <div class="father">
        <div class="left">左侧不动</div>
        <div class="main">右侧自适应</div>
    </div>

### ag-Grid 社区版 31.3.0 列宽自适应设置示例 在 ag-Grid 中,列宽的自适应可以通过多种方式实现。以下是基于 `ag-grid-community@31.3.0` 的完整示例代码,展示如何设置列宽自适应。 #### 示例代码 ```javascript // 引入 ag-Grid 和相关样式 import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import { Grid, GridOptions } from 'ag-grid-community'; // 定义网格选项 const gridOptions: GridOptions = { columnDefs: [ { field: "make", headerName: "Make", width: 150, resizable: true }, { field: "model", headerName: "Model", width: 150, resizable: true }, { field: "price", headerName: "Price", width: 150, resizable: true } ], rowData: [ { make: "Toyota", model: "Celica", price: 35000 }, { make: "Ford", model: "Mondeo", price: 32000 }, { make: "Porsche", model: "Boxster", price: 72000 } ], defaultColDef: { // 允许调整列宽 resizable: true, // 设置最小宽度以避免列过窄 minWidth: 100 }, onGridReady: (params) => { if (params.api && params.columnApi) { // 在网格准备就绪时调整列宽以适应内容 params.api.sizeColumnsToFit(); } }, onFirstDataRendered: (params) => { if (params.api) { // 当数据首次渲染完成时,调整列宽以适应内容 params.api.sizeColumnsToFit(); } } }; // 将网格附加到 DOM document.addEventListener("DOMContentLoaded", () => { const eGridDiv = document.querySelector<HTMLElement>('#myGrid')!; new Grid(eGridDiv, gridOptions); // 监听窗口大小变化,动态调整列宽 window.addEventListener('resize', () => { if (gridOptions.api) { gridOptions.api.sizeColumnsToFit(); // 动态调整列宽[^3] } }); }); ``` #### HTML 结构 ```html <div id="myGrid" class="ag-theme-alpine" style="height: 500px; width: 100%;"></div> ``` --- ### 关键点解析 1. **列宽自适应方法** - 使用 `sizeColumnsToFit()` 方法可以在网格初始化或窗口大小变化时自动调整列宽以适应容器[^3]。 - 确保网格容器具有明确的宽度和高度,否则可能导致布局问题。 2. **默认列定义 (`defaultColDef`)** - 设置 `resizable: true` 允许用户手动调整列宽。 - 设置 `minWidth` 防止列宽过小导致内容不可读。 3. **事件监听** - 使用 `onGridReady` 和 `onFirstDataRendered` 事件确保在网格准备就绪或数据首次渲染完成后调整列宽[^2]。 - 添加 `window.addEventListener('resize', ...)` 监听窗口大小变化,并动态调整列宽。 4. **列定义 (`columnDefs`)** - 每个列定义中可以单独设置 `width` 属性,同时启用 `resizable` 属性以便用户交互调整。 --- ### 注意事项 - 如果需要固定某些列的位置,可以使用 `pinned: 'left'` 或 `pinned: 'right'` 属性将列固定在左侧右侧[^2]。 - 在高密度数据场景下,建议结合 `autoSizeColumns()` 方法动态调整列宽,但需注意性能影响。 - 确保引入正确的 ag-Grid 样式文件以避免样式问题。 --- ###
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值