如何实现左右固定100px、中间自适应的CSS三列布局且文本不溢出？

嘿，我来帮你搞定这个三列布局的需求～你之前用float的方式确实会遇到问题，因为float布局下中间的margin:auto起不到自适应填充的作用，而且很容易出现文本溢出或者布局错乱的情况。下面给你几种靠谱的实现方案，都是现在前端开发里常用的方法：

方案一：Flexbox布局（最推荐） #

Flexbox是目前做自适应布局最便捷的方案，代码简洁还不容易踩坑：

<div style="width: 100%; display: flex;">
  <div style="width: 100px; height: 20px;">Test1</div>
  <div style="flex: 1; overflow-wrap: break-word; padding: 0 8px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div style="width: 100px; height: 20px;">Test3</div>
</div>

关键说明： #

• 父容器设置display: flex，让子元素变成弹性布局项
• 左右两列固定width:100px，无需依赖float
• 中间列设置flex:1，表示自动填充父容器剩余的所有空间
• overflow-wrap: break-word用来让过长文本自动换行，避免溢出；如果需要单行文本省略效果，可以换成overflow:hidden; text-overflow:ellipsis; white-space:nowrap

方案二：Grid布局 #

Grid布局天生适合这种固定+自适应的列结构，代码同样直观：

<div style="width: 100%; display: grid; grid-template-columns: 100px 1fr 100px; gap: 8px;">
  <div style="height: 20px;">Test1</div>
  <div style="overflow-wrap: break-word;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div style="height: 20px;">Test3</div>
</div>

关键说明： #

• 父容器display:grid，通过grid-template-columns直接定义三列宽度：100px（左列）、1fr（中间自适应）、100px（右列）
• gap可以快速设置列之间的间距，不用额外写margin
• 中间列同样通过overflow-wrap: break-word处理文本溢出问题

方案三：传统calc方法（兼容旧浏览器） #

如果需要兼容一些不支持flex/grid的旧浏览器，可以用这种方法：

<div style="width: 100%; position: relative;">
  <div style="width: 100px; height: 20px; position: absolute; left: 0;">Test1</div>
  <div style="margin: 0 100px; overflow-wrap: break-word;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div style="width: 100px; height: 20px; position: absolute; right: 0; top:0;">Test3</div>
</div>

关键说明： #

• 父容器设置position:relative，让左右列的绝对定位基于父容器
• 左右列用position:absolute固定在父容器的两侧
• 中间列设置margin:0 100px，留出左右列的宽度，实现自适应填充

为什么你之前的代码不生效？ #

你之前用float布局的时候，中间的div没有被约束在左右float元素之间——float元素会脱离文档流，中间div的宽度不会自动计算剩余空间，而且如果文本过长会直接溢出。另外，float布局还容易导致父容器高度塌陷（你给左右列设了height:20px，但中间内容多的话会超出父容器），所以现在一般不推荐用float来做这种自适应布局啦。

内容的提问来源于stack exchange，提问作者tone