Question

我正在尝试进入网格布局系统，并且我真的在网格容器内的图像尺寸方面苦苦挣扎。我只想创建一个带有导航栏的简单页面。导航栏应包含徽标，图标和文本。它分为三个部分：

包含徽标的左侧部分（与左侧对齐）
中心部分，包含标题（与中心对齐）
右侧，其中包含图像和文本（与右侧对齐）

因为我想尽可能地使用网格，所以我的计划结构看起来像这样：https://codepen.io/Nicolas_V/pen/QWbvxoW

HTML ：

<div class="site">
  <div class="navbar">
    <div class="navbar__area--left">
      <div>Logo</div>
    </div>
    <div class="navbar__area--center">
      <div>Admin Page</div>
    </div>
    <div class="navbar__area--right">
      <div>Text</div>
      <div>Image</div>
    </div>  
  </div>
  <div class="content">Content</div>
</div>

CSS：

html, body{
  margin: 0;
  padding: 0;
}
.site{
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100vh;
}
.navbar{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background-color: green;
}
.navbar > div > *{
  display: inline;
  margin-right: 2rem;
  margin-left: 2rem;
}

.navbar__area--left{
  text-align: left; 
}
.navbar__area--center{
  text-align: center;
}
.navbar__area--right{
  text-align: right;
}

我为每个零件创建了三个容器，因此可以分别对齐它们的内容。到目前为止一切顺利。

现在，我在左侧添加了一个测试图像，并希望它适合容器的高度。但事实并非如此。 https://codepen.io/Nicolas_V/pen/XWbRYLR

我不明白的是，如果我从左侧移除封闭的容器，那么图像将完全符合之前预期的导航栏高度。

https://codepen.io/Nicolas_V/pen/rNVmrNm

但是我需要一个容器，因为对于右边的部分，我希望容器中的多个项目都对齐到右侧。

我知道，我可以为图像等设置固定的高度，但是我想深入研究网格系统，并且我确定有办法解决我的问题。

控制嵌套网格布局中图像的大小

0 个答案: