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

最新推荐文章于 2024-08-25 12:01:28 发布

freedom1993

最新推荐文章于 2024-08-25 12:01:28 发布

阅读量5.6k

点赞数 4

分类专栏： web

本文链接：https://blog.csdn.net/github_22022001/article/details/47278349

版权

这篇博客讲述了作者在前端面试中遇到的一个布局问题：如何在一个父元素中设置三个水平对齐的子元素，其中两侧宽度固定，中间元素宽度自动填充。作者最初使用float:left;未能解决问题，后来通过调整CSS实现了目标效果，并探讨了相关延伸问题的解决方案，邀请读者分享更多优化建议。

摘要由CSDN通过智能技术生成

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

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

问题描述：一个宽度不确定的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;
      height: 100%;
      background: pink;
      float: left;
    }
    .center{
      width: