三栏自适应布局实现(左右固定宽度,中间自适应)

最新推荐文章于 2022-05-17 16:36:47 发布

tonyhzw

最新推荐文章于 2022-05-17 16:36:47 发布

阅读量669

点赞数

文章标签：面试题布局 web前端

本文链接：https://blog.csdn.net/datou0529/article/details/51439292

版权

   今天看了很多公司的面试题,发现都喜欢考察多栏布局,并且存在一个固定宽度,其他自适应宽度的题目.这里实现如下:

<!Doctype html>
<head>
<style>
#right{
float:right;
width:20%;
height:100px;
background-color:red;
}
body{
margin:0px;
padding:0px;
}
#left{
float:left;
width:20%;
height:100px;
background-color:green;
}
#mid{
height:200px;
background-color:blue;
overflow:hidden;
}
</style>
</head>
<body>
<container>
<div id="right"></div>
<div id="left"></div>
<div id="mid"></div>
</container>
</body>
</html>