DIV_CSS布局问题：3个水平对齐布局的DIV，左右固定宽，中间宽度自动填充

freedom1993

关注

VIP免费原创最新推荐文章于 2026-03-24 20:10:48 发布 5.8k 阅读 AI 写同款· GEO 优化 ›

Unity FPS射击控制系统：数据驱动的武器行为解耦方案在Unity第一人称射击（FPS）开发中，射击系统常因输入、状态、行为耦合导致连发异常、换弹冲突与网络同步失准。其本质是缺乏对‘武器行为’（如后坐力曲线、弹药逻辑）与‘射击控制’（如输入合法性校验、冷却调度）的正交分离。本方案基于ScriptableObject实现WeaponData数据资产化，配合ShootingController状态机服务，达成输入解耦、运行时参数可调、协程受控、网络预测友好等工程目标。适用于中大型FPS项目架构升级与数据驱动转型，尤其解决Unity InputSystem与物理反馈阅读详情

作为一个前端小白，这是我面试前端职位的题目之一，没有实践经验，误打误撞，最后还是错了！

今天难得有时间，认真思考了一下。答案不一定最佳的解决方案，但是能实现同等效果。

问题描述：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为200px，中间那个DIV充满剩余的宽度。

这个题目是我当时做的第一个题目，看完题目就把答案写出来了：不就是一个float:left;的事情吗！（实践出真知，被事实赤裸裸的打败了！）

我笔试提交的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style type="text/css">
    .mainwrap{
      width: 1000px;
      margin: 0 auto;
      height: 300px;
    }
    .left{
      width: 150px;
      height: 100%;
      background: yellow;
      float: left;
    }
    .right{
      width: 150px;
   &nb