网格元素不对齐

Question

我想把<p>元素靠左对齐，图片靠右对齐。图片无法对齐到第四列，我需要解决这个问题。

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent img {
  grid-column: 4;
  grid-row: 1;
}

<div class="content">
  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
  </div>
</div>

- Alexander

---

我在你的HTML中没有看到类.references。 - Roy

看起来很好。子内容正好在你说的位置。问题是什么？ - Lazar Nikolic

没问题，我之前把类名写错了，现在想要在网格中对齐一张图片，但还是不行。你能解释一下如何正确地在网格中对齐图片吗？ - Alexander

我很愿意帮助你，但你需要将HTML和CSS部分放在img标签可见的位置。 - Lazar Nikolic

1. 没有p元素。
2. 如果是这种情况，那么网格应该在#subcontent div上。

- VXp

Answer 1

我不确定你在这里想要的布局是什么，但你指定了第四列跨越了两行。将它改为一行可以让所有内容排成一行：

.references {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent {
  grid-column: 4;
  grid-row: 1;
}

<div class="references">
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>

  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>
  </div>
</div>

- MichaelvE

Answer 2

这是您想要的吗？您的图片不是直接嵌套在网格中，因此将grid-column分配给它将不起作用。

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

.content img {
  grid-column: 4;
  grid-row: 1;
  max-height: 100%;
  max-width: 100%;
}

<div class="content">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
</div>

- Chris Li