CSS——自适应布局之百分比浮动布局和半固定浮动布局
程序员文章站
2024-01-28 18:32:34
...
百分比浮动布局
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
}
#parent{
background-color: salmon;
height: 100%;
width: 100%;
position: absolute;/*一定要加上，不然没有高度*/
}
#left{
float: left;
height: 100%;
width: 20%;//设置百分比
background-color: blueviolet;
}
#right{
background-color: saddlebrown;
height: 100%;
float: right;
width: 80%;
}
</style>
</head>
<body>
<div id="parent">
<div id="left">
左浮动float: left;
</div>
<div id="right">
右浮动float: right;
</div>
</div>
</body>
</html>
效果图
半固定浮动布局
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
}
#parent{
background-color: salmon;
height: 100%;
width: 100%;
position: absolute;/*一定要加上，不然没有高度*/
}
#left{
float: left;
height: 100%;
width: 200px;
background-color: blueviolet;
}
#right{
background-color: saddlebrown;
height: 100%;
float: right;
width: calc(100% - 200px);/*记得100%空格-空格200px，这是less里面的函数，有兴趣的可以学习一哈*/
}
</style>
</head>
<body>
<div id="parent">
<div id="left">
左浮动float: left;
</div>
<div id="right">
右浮动float: right;
</div>
</div>
</body>
</html>