方案：媒体对象
媒体对象是我们在网络上随处可见的一种模式。它指的是一个两列的盒子，一侧是图片，另一侧是描述性文本，例如社交媒体帖子。
依赖项
媒体对象模式需要以下部分或全部特征
- 在移动设备上堆叠显示，在桌面设备上两列显示。
- 图片可以在左侧或右侧。
- 图片可能小或大。
- 媒体对象可以嵌套。
- 无论哪一侧最高，媒体对象都应清除内容。
食谱
点击下面代码块中的“Play”按钮，在 MDN Playground 中编辑示例。
html
<div class="media">
<div class="img">
<img
src="https://mdn.github.io/shared-assets/images/examples/balloons_square.jpg"
alt="Balloons" />
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula
vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit
lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque
porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
condimentum.
</p>
</div>
<div class="footer">An optional footer goes here.</div>
</div>
<div class="media">
<div class="img">
<img
src="https://mdn.github.io/shared-assets/images/examples/sharp-account_box-24px.svg"
width="80px"
alt="Account" />
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula
vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit
lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque
porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
condimentum.
</p>
</div>
<div class="footer"></div>
</div>
css
body {
font: 1.2em sans-serif;
}
img {
max-width: 100%;
}
p {
margin: 0 0 1em 0;
}
@media (width >= 500px) {
.media {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-template-rows: 1fr auto;
grid-template-areas:
"image content"
"image footer";
grid-gap: 20px;
margin-bottom: 4em;
}
.media-flip {
grid-template-columns: 1fr fit-content(250px);
grid-template-areas:
"content image"
"footer image";
}
.img {
grid-area: image;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
}
已做出的选择
我选择使用网格布局来创建媒体对象，因为它允许我在需要时控制二维布局。这意味着当我们的页脚上方内容较短时，页脚可以被推到媒体对象的底部。
使用网格布局的另一个原因是，我可以使用fit-content来调整图片轨道的大小。通过使用fit-content和最大尺寸200像素，当图片较小（例如图标）时，轨道只会变得与图片的大小一样大，即max-content大小。如果图片较大，轨道会在200像素处停止增长，并且由于图片应用了max-width 100%，它会缩小以继续适应列内。
通过使用grid-template-areas来实现布局，我可以在CSS中看到这种模式。我定义网格的条件是视口宽度为500像素，因此在较小的设备上，媒体对象会堆叠显示。
该模式的一个选项是翻转它，将图片切换到另一侧——这通过添加media-flip类来完成，该类定义了一个翻转的网格模板，导致布局镜像。
当我们将一个媒体对象嵌套在另一个媒体对象中时，我们需要将其放置在常规布局的第二个轨道中，并在翻转时放置在第一个轨道中。
另见
fit-content属性- 使用网格模板区域
- CSS 网格布局模块