前两天,看微信上关于前端的推送的时候,发现了一道一眼看起来特别简单的面试题,题是这样说的:
两个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>