未定义高度时，CSS 网格中的基线垂直对齐在 Firefox 和 Safari 中不起作用

问题描述 投票：0回答：1

我需要将多个带有图片和标题的项目排列在网格的一行中，如下所示：

  1. 图片的长宽比已知。
  2. 列的数量是已知的。
  3. 网格的宽度继承自其父级，因此可以是任何值。
  4. 行数未知。这就是为什么它是网格而不是弹性盒。
  5. 解决方案应该仅包含 HTML 和 CSS。

我创建了一个网格并通过基线对齐元素。当 Chrome 中一切正常时，Safari 和 Firefox 中就会出现错误：

通过尝试 CSS，我发现了 Safari 的一个 hack：

在 Safari 中不起作用：

align-items: baseline;
gap: 24px;
grid-template-columns: repeat(4, 1fr);

在 Safari 中正常工作：

align-items: baseline;
gap: 24px;
grid-template-columns: repeat(4, calc((100% - 24px - 24px - 24px) / 4));

我找不到在 Firefox 中按预期工作的解决方案。

我发现：

  1. 如果单元格中图片的高度以像素为单位定义，则它可以在 Firefox 和 Safari 中正常工作，无需破解。
  2. 如果单元格的宽度以像素为单位定义，则它在 Firefox 中可以正常工作。
  3. 如果用带有 
    aspect-ratio
    或 
    padding-top
    的块替换图片，则不会改变任何内容。
  4. 如果单元格的宽度定义为 
    100%
    ，它在 Firefox 中不起作用，但看起来有所不同：

这是沙箱和代码：

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .grid {
            width: 500px;
            gap: 24px;
            display: grid;
            grid-template-columns: repeat(4, calc((100% - 72px) / 4));
            align-items: baseline;
        }
        .image-like {
            background: green;
        }
        img {
            display: block;
            width: 100%;
        }
        .grid + h2 + .grid .image-like {
            background: orange;
        }
    </style>
</head>
<body>
<h2>Grid with divs and the hardcoded height (correct)</h2>
<div class="grid">
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="height: 130px;"></div>
            </div>
            title
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="height: 110px;"></div>
            </div>
            longer title to fix two lines
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="height: 140px;"></div>
            </div>
            short title
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="height: 90px;"></div>
            </div>
            longer title to fit multiple lines. Like 3 or smth
        </div>
    </div>
</div>

<h2>Grid with divs and aspect ratio (incorrect in Firefox and Safari)</h2>
<div class="grid">
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="aspect-ratio: 0.7;"></div>
            </div>
            title
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="aspect-ratio: 0.6;"></div>
            </div>
            longer title to fix two lines
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="aspect-ratio: 0.5;"></div>
            </div>
            short title
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <div class="image-like" style="aspect-ratio: 0.9;"></div>
            </div>
            longer title to fit multiple lines. Like 3 or smth
        </div>
    </div>
</div>

<h2>Grid with images (incorrect in Firefox and Safari)</h2>
<div class="grid">
    <div class="item">
        <div>
            <div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg/150px-Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg" />
            </div>
            title
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg/150px-King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg" />
            </div>
            longer title to fix two lines
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/George_II_by_Thomas_Hudson.jpg/300px-George_II_by_Thomas_Hudson.jpg" />
            </div>
            short title
        </div>
    </div>
    <div class="item">
        <div>
            <div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg/150px-Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg"/>
            </div>
            longer title to fit multiple lines. Like 3 or smth
        </div>
    </div>
</div>
</body>
</html>
css firefox safari css-grid vertical-alignment
1个回答
0
投票

您可以使用 

display:subgrid
来实现此目的，并为要共享的子网格定义 2 行（1 行用于图片，1 行用于标题。）

由于您在 

.item
下有一个额外的 div 包装器，因此您需要将其制作为 
display:content
或作为 
subgrid
的附加层。

.grid{
  grid-template-rows: auto auto;
}
.item{
  display: grid;
  grid-template-columns: subgrid;
}
.item > div{
  display: grid;
  grid-template-columns: subgrid;
}
.item > div{
  display: grid;
  grid-template-columns: subgrid;
}

如下图：

.grid {
  width: 500px;
  gap: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: baseline;
  grid-template-rows: auto auto;
}

.image-like {
  background: green;
}

img {
  display: block;
  width: 100%;
}

.grid+h2+.grid .image-like {
  background: orange;
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}

.item>div {
  display: grid;
  grid-template-columns: subgrid;
}
<h2>Grid with divs and the hardcoded height (correct)</h2>
  <div class="grid">
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="height: 130px;"></div>
              </div>
              title
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="height: 110px;"></div>
              </div>
              longer title to fix two lines
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="height: 140px;"></div>
              </div>
              short title
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="height: 90px;"></div>
              </div>
              longer title to fit multiple lines. Like 3 or smth
          </div>
      </div>
  </div>
  
  <h2>Grid with divs and aspect ratio (incorrect in Firefox and Safari)</h2>
  <div class="grid">
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="aspect-ratio: 0.7;"></div>
              </div>
              title
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="aspect-ratio: 0.6;"></div>
              </div>
              longer title to fix two lines
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="aspect-ratio: 0.5;"></div>
              </div>
              short title
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <div class="image-like" style="aspect-ratio: 0.9;"></div>
              </div>
              longer title to fit multiple lines. Like 3 or smth
          </div>
      </div>
  </div>
  
  <h2>Grid with images (incorrect in Firefox and Safari)</h2>
  <div class="grid">
      <div class="item">
          <div>
              <div>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg/150px-Dahl%2C_Michael_-_Queen_Anne_-_NPG_6187.jpg" />
              </div>
              title
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg/150px-King_George_I_by_Sir_Godfrey_Kneller%2C_Bt_%283%29.jpg" />
              </div>
              longer title to fix two lines
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/George_II_by_Thomas_Hudson.jpg/300px-George_II_by_Thomas_Hudson.jpg" />
              </div>
              short title
          </div>
      </div>
      <div class="item">
          <div>
              <div>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg/150px-Allan_Ramsay_-_King_George_III_in_coronation_robes_-_Google_Art_Project.jpg"/>
              </div>
              longer title to fit multiple lines. Like 3 or smth
          </div>
      </div>
  </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.