我是一个初学者，我目前正在尝试创建一个简单的容器布局，其中包括一个头部容器，由3个较小的容器填充。容器中充满了图像，当页面的宽度变得太小时，中心容器中的图像开始收缩，这正是我想要的现在的问题是，我想整个头部垂直收缩，但其他2个容器只是坚持自己的大小，无论我所尝试的。
例如，我的标题总宽度是640px，高度是128px
Left = 64x128
Center = Whatever is left between L and R
Right = 128x128Picture to visualize everything
How it looks when the width is changing
当中心缩小例如20px高度时，我希望它是什么：
Left = 64x108 (keeps its width but adjusts the height based on center)
Center = Still hatever is left between L and R
Right = 108x108 (adjusts both, width and height based on center height)当空间不足时，它会缩小并保持其纵横比，这意味着它在水平方向上总是完美的，但由于L和R没有缩小，它在垂直方向上不再合适。我如何使L和R从中心得到它们的高度？
我的当前代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="page">
<div class="header">
<div class="menubtn"></div>
<div class="logo"></div>
<div class="avatar"></div>
</div>
<div class="main"></div>
</div>
</body>
</html>body,html {
height: 100%;
margin: 0;
padding: 0;
}
.page {
border: 2px solid blue;
margin: 0;
padding: 0;
margin: 0 auto;
max-width: 640px;
width: 100%;
height: 80%;
z-index: 1;
}
.header {
border: 2px solid green;
position: fixed;
width: 100%;
max-width: 640px;
height: 100%;
max-height: 128px;
}
.menubtn {
border: 2px solid red;
position: absolute;
width: 64px;
height: 128px;
}
.logo {
border: 2px solid yellow;
position: absolute;
left: 64px;
right: 128px;
width: auto;
height: 100%;
}
.logo img {
width: 100%;
}
.avatar {
border: 2px solid black;
position: absolute;
right: 0;
width: 128px;
height: 128px;
}
.avatar img {
max-width: 100%;
max-height: 100%;
margin: 4px;
width: 120px;
height: 120px;
}请忽略它看起来有多乱，我删除了大量不相关的东西，使所有的东西都变短，很多东西都是剩余的，或者首先就不应该在那里哈哈
这样的东西只需要CSS就可以实现吗？还是需要脚本？
1条答案
按热度按时间qzwqbdag1#
你想要这个吗？