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

最新推荐文章于 2023-01-03 09:15:27 发布

蒲小若

最新推荐文章于 2023-01-03 09:15:27 发布

阅读量841

点赞数

分类专栏：前端开发经验总结录

本文链接：https://blog.csdn.net/qq_39585562/article/details/77104370

版权

前端开发经验总结录专栏收录该内容

40 篇文章 1 订阅

订阅专栏

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

两个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
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
连个div显示在一行，前者给定宽度，后者沾满屏幕剩余的宽度

前两天，看微信上关于前端的推送的时候，发现了一道一眼看起来特别简单的面试题，题是这样说的：两个div排列在一行上，其中第一个div给一个定宽，第二个div充满剩余的宽度。看到这个题的时候，我首先想到的是弹性盒子，由于它是css3里的属性，可能低版本的浏览器会不兼容，那还有其他的方法吗，我想了有一段时间，可是没想到，之后的两天，这个面试题一直都是我耿耿于怀的东西，趁着今天有时间，我就上网看了
复制链接

扫一扫