下面再处理一下内容卡片项目的布局，先观察一下在这个设计软件里的内容卡片项目。每个项目可以分成上下两个部分，上面是媒体，下面是内容。

在网页文档里准备一下这个内容卡片项目的结构，删除掉 .post-list 里面的这些 div 元素，然后添加一个新的 div 元素，上面加上一个类，名字是 .post-list-item，这个元素可以作为卡片项目的整体包装，项目里分成了上下两个部分，每个部分都需要一个包装，添加两组 div。在上面这个 div 上面添加一个类，名字是 media，下面这个 div 上面也加上一个类，名字是 content。

然后再观察一下这个卡片布局的骨架设计图，卡片里的内容这部分又被分成了几个部分，最左边是一个缩略图，中间是内容的标题，最右边是内容相关的动作。

在这个 .content 元素里面，添加三组 div 元素。第一个元素上加上 .thumbnail ，第二个元素上加上 .header ，第三个元素上加上 .actions。

这个 .header 类的元素分成了上下两个部分，下面这个部分又分成两个部分。在这个 .header 元素里，添加两组 div，在下面这个 div 里面，再包装两组 div。

然后这个 .actions 里面分成了两组，每一组里面又有两样东西。在这个 .actions 元素里，先添加两组 div，每一组 div 里面，再包装两组 div。 这样内容卡片的结构就算是准备好了。

样式

下面我们去设计它的样式。先去掉 .post-list > div 里的背景颜色。

然后先设计一下内容项目里的 .media 这个元素的样式，用 .post-list-item > .media 作为选择器，把 background 设置成 --skeleton-object-background ，再把 height 设置成 100% 。

再设计一下内容项目里的 .content 这个元素的样式，用 .post-list-item > .content 作为选择器，display 设置成 flex，gap 是 16 像素，padding 是 8 像素 0。

下面是内容里的 .thumbnail 这个元素的样式，选择器可以写成 .post-list-item > .content > .thumbnail，把元素的宽度设置成 32像素，高度是 32 像素，border-radius 是 50%，background 用一下 --skeleton-object-background。

内容里的 .header 元素可以让它占用所有可用空间，.post-list-item > .content > .header，把 flex 设置成 1 。 设计一下这个 .header 元素里的第一个子元素，.post-list-item > .content > .header > div:first-child ，宽度是 72像素，高度是 18 像素，border-radius 是 18 像素，背景颜色设置成 --skeleton-object-background ，再把 margin-bottom 设置成 4 像素。

这个 .header 里的最后一个元素要把它变成 flex 容器，.post-list-item > .content > .header > div:last-child，把 display 设置成
flex，再把 gap 设置成 4px。

.header 里的最后一个子元素的第一个 div 子元素，.post-list-item > .content > .header > div:last-child > div:first-child，把 width 设置成 40像素，height 是 14 像素，border-radius 设置成 14 像素，再用 background 把背景颜色设置成 --skeleton-object-background。

.post-list-item > .content > .header > div:last-child > div:last-child，宽度是 14 像素，高度是 14 像素，border-radius 是 50%，再把背景设置成 --skeleton-object-background。

.actions

再处理一下 .content 里的 .actions 这个元素，.post-list-item > .content > .actions，把 display 设置成 flex，gap 是 8 个像素。这个 .actions 里的子元素需要变成 flex 容器，.post-list-item > .content > .actions > div ，把 display 设置成 flex，gap 是 8 像素，align-items 是 center。

然后是 .post-list-item > .content > .actions > div > div:first-child ，width 是 24 像素，height 是 24 像素，border-radius 是 50%，再把 background 设置成 --skeleton-object-background。

.post-list-item > .content > .actions > div > div:last-child ，宽度是 32 像素，高度是 14 像素，border-radius 是 14 像素，background 设置成 --skeleton-object-background。

@media

下面再写一段媒体查询，@media (min-width: 640px) ，在里面添加一段样式，.post-list-item.portrait 下面的 .media，设置一下 height，值可以用一下 calc 这个函数计算出高度值，用 100% 的高度减去 52 像素。

预览

复制一些这个内容卡片项目的结构，多添加几个内容卡片。再找一个内容卡片项目，在上面添加一个 .portrait 类。然后在浏览器观察一下页面上显示的这些内容卡片项目。用了 .portrait 这个类的项目的高度，正好是普通项目的两倍。