连个div显示在一行，前者给定宽度，后者沾满屏幕剩余的宽度

来源：互联网发布：办公软件考试系统编辑：程序博客网时间：2024/06/09 14:48

前两天，看微信上关于前端的推送的时候，发现了一道一眼看起来特别简单的面试题，题是这样说的：

两个div排列在一行上，其中第一个div给一个定宽，第二个div充满剩余的宽度。

看到这个题的时候，我首先想到的是弹性盒子，由于它是css3里的属性，可能低版本的浏览器会不兼容，那还有其他的方法吗，我想了有一段时间，可是没想到，之后的两天，这个面试题一直都是我耿耿于怀的东西，趁着今天有时间，我就上网看了一下，又总结了两个方法。下面就是解决这个问题的三个方法，如果你还有其他更好的方法的话，可以在评论上给我告知哦。

方法一、用弹性盒子，具体代码如下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{width: 100%;height: 150px;}.left{float: left;width: 150px;height: 150px;background: #f00;}.right{height: 150px;background: #00f;overflow: hidden;/*zoomS是IE的专有属性，可能其他浏览器不支持，他可以设置或检索对象的缩放比例，除此之外，他还有一些小作用，比如出发IE的hasLayout属性，清除浮动，清除margin重叠等。*/zoom: 1; }</style></head><body><div class="box"><div class="left"></div><div class="right"></div></div></body></html>

方法二、用margin-left来实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{width: 100%;height: 150px;}.left{float: left;width: 150px;height: 150px;background: #f00;}.right{margin-left: 150px;height: 150px;background: #00f;}</style></head><body><div class="box"><div class="left"></div><div class="right"></div></div></body></html>

方法三、用浮动+zoom来事项

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box{display: flex;width: 100%;height: 150px;}.left{width: 150px;height: 150px;background: #f00;}.right{flex-grow: 1;height: 150px;background: #00f;}</style></head><body><div class="box"><div class="left"></div><div class="right"></div></div></body></html>

这三个方法最终实现的结构如图所示

阅读全文

0 0