移动Wed （伸缩布局）🍑

img


代码就可以，谢谢

你题目的解答代码如下：（如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.box {
    display: flex;
    flex-flow: column nowrap;
    width: 500px;
    height: 800px;
    border: 3px solid #000;
}
.header,.footer {
    background-color: #f00;
    width: 100%;
    height: 100px;
}
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
}
.left {
    background-color: #0f0;
    width: 25%;
    height: 100%;
}
.right {
    background-color: #00f;
    width: 75%;
    height: 100%;
}
</style>
</head>
<body>

<div class="box">
    <div class="header"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>
</body>
</html>

百分比布局。

ConstraintLayout 了解一下