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

最新推荐文章于 2024-05-09 22:44:06 发布

freedom1993

最新推荐文章于 2024-05-09 22:44:06 发布

阅读量5.6k

点赞数 4

分类专栏： web

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

版权

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

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

问题描述：一个宽度不确定的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:

最低0.47元/天解锁文章

freedom1993

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
DIV_CSS布局问题：3个水平对齐布局的DIV，左右固定宽，中间宽度自动填充

作为一个前端小白，这是我面试前端职位的题目之一，没有实践经验，误打误撞，最后还是错了！今天难得有时间，认真思考了一下。答案不一定最佳的解决方案，但是能实现同等效果。问题描述：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为200px，中间那个DIV充满剩余的宽度。这个题目是我当时做的第一个题目，看完题目就把答案写出来了：不就是一个float:left;的事情吗
复制链接

扫一扫