如何在页面一侧排列图片，另一侧排列段落？

前几天我收到了一封电子邮件，里面提到了这个问题，我认为这将是一篇不错的博文，因为如今在 CSS 中实现这一点非常令人满意。此外，我们可以在过程中加入一些润色。

从 HTML 角度来看，我正在考虑图像、文本、图像、文本等。

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

如果这是我们 HTML 文档中的整个主体，那么 **博文标题中问题的答案实际上是两行 CSS**

body {
  display: grid;
  grid-template-columns: min-content 1fr;
}

它看起来像这样...

太棒了。感谢 CSS。但是让我们把它清理一下。让我们确保有一个间隙，设置默认类型，并控制布局。

body {
  display: grid;
  padding: 2rem;
  grid-template-columns: 300px 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  font: 500 100%/1.5 system-ui;
}
img {
  max-width: 100%;
  height: auto;
}

我的意思是...发布吧，对吧？很接近了，但也许我们可以添加一个快速的移动样式。

@media (max-width: 650px) {
  body {
    display: block;
    font-size: 80%;
  }
  p {
    position: relative;
    margin: -3rem 0 2rem 1rem;
    padding: 1rem;
    background: rgba(white, 0.8);
  }
}

好了，现在发布吧！

Jules

# 2021年6月30日

呃……也许使用 figure 和 figcaption？这样文本就可以与图像相关联？

Nicklas

# 2021年7月1日

如果文本与不同的图像相关联，那么这是否适合使用 figure 和 figcaption？

类似于

<figure class="thumbnail">
  <img src="..." alt="..." height="" width="" />
  <figcaption>Text text text...</figcaption>
</figure>

但是，网格布局需要重新定义

Chris Coyier

评论永久链接# 2021年7月1日

也许吧。如果文本确实是图像的标题，那当然可以。我不认为它总是必须如此（比如，一个功能列表，其中图像只是一个任意的图标或截图，文本并不是真正的标题）。

一旦你有了像这样的“挡路”的包装器，这就会成为 subgrid 存在的令人信服的理由！

Jon

# 2021年7月1日

你也可以添加一个 box-shadow:20px 15px green;
给图像添加一个阴影。只有在看起来好的情况下才添加。

Konstantin

# 2021年7月3日

你是否曾经想过，如果我们在位于替换元素（例如<img>）下方的元素（例如，在本例中是<p>）上使用负边距，我们就必须为使用负边距的元素创建一个新的堆叠上下文？否则，<p> 的背景将位于<img> 标签之下。
在本例中，我们必须将position: relative;（或者可以是opacity: 0.99; 等）添加到<p> 中，即使它在 DOM 中位于图像下方。
另一方面，如果我们将<img> 更改为例如<div>，则无需创建新的堆叠上下文，我们可以使用负边距。

Jason

评论永久链接# 2021年7月3日

我认为移动样式的目的是（在本例中）在图像和相应的段落之间创建一个堆叠效果？那么在这种情况下，创建一个新的堆叠上下文是否合理？

Peter Scott

# 2021年12月13日

谢谢，Chris，

这正是我一直在寻找的。我通常会制作页面来描述我们在内华达山脉的背包旅行，里面有很多图像（其中一些我可以单击以展开），每个图像都会提供一两段文本。所以你的这个清晰的示例非常适合！

Meredith

# 2021年12月21日

嗨，Chris - 我找到了这个帖子，因为我一直想找一种方法将文本块与图像的某些特征链接起来。很难解释，但我曾在纽约时报的一篇文章中看到过这种效果，我很好奇实现起来有多容易/多难。这是我需要编写的代码，还是已经存在解决方案？如果您有想法，请查看链接，谢谢！ https://www.nytimes.com/interactive/2021/04/02/arts/design/shah-jahan-chitarman.html

Jacob

# 2022年8月15日

如果要使用相同的設計，但想要在段落上方添加標題，該怎麼辦？

<img src="..." alt="..." height="" width="" /> <h1>標題文字！</h1> <p>文字文字文字...</p>

Geoff Graham

评论永久链接# 2022年8月16日

可以尝试将标题和段落放在一个包装器中，然后将现有的段落样式应用于包装器。

Abas Obot

# 2022年10月17日

我将其应用于我的博客，它可以正常工作。但是，背景不起作用。我不得不将边距从 -3 调整到 0rem 并对齐文本。我已经尝试以不同的形式呈现我的引文以利于我的博客访问者，但我认为应用这种网格形式是一个不错的主意。我唯一遇到的困难是，在 Blogger 中，一旦你标记了 body，CSS 就会影响整个博客。我不得不使用类和 id 来影响代码。非常感谢您分享这一点。

评论

发表评论 取消回复

发表评论取消回复