我是网络开发的初学者, 我想将我的主页元素(div)设置为Flex列,其中第一个元素是一个Flex行容器,它再次包含一个Flex容器div(图标) 当我这样做时,我发现包含 img 元素的容器的宽度没有减小以适应所有 imgs 为什么会发生这种情况?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0px;
}
#home-page {
display: flex;
flex-direction: column;
}
* {
border: 1px solid;
margin: 5px;
}
nav {
display: flex;
height: 100px;
}
#icons {
display: flex;
}
img {
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="home-page">
<nav>
<div id="icons">
<div><img src="/images/icons/menu-icon.png" alt=""></div>
<div><img src="/images/icons/search-icon.png" alt=""></div>
</div>
</nav>
</div>
</body>
</html>
这是输出的图像 还请解释一下,当存在所有相对大小(百分比等)时,如何计算任何元素的宽度和高度
当我将宽度或高度设置为像素值时,我就工作了,但我想知道为什么它不能以相对尺寸工作(我想让大多数尺寸相对,以便我的网站变得响应)
相对百分比宽度/高度单位是相对于最接近的绝对大小的父元素计算的。假设一个 div
元素占据其父元素的 50%,则该
div
的父元素必须绝对调整大小(以像素、视口单位、em 等为单位)。我建议您检查 w3schools 的 CSS 单元参考:https://www.w3schools.com/cssref/css_units.php
还有容器div #icons
img
分配实际宽度值。