基础 CSS 媒体对象

CSS 媒体对象（media object）是一种非常常见的页面布局模式，通常用于展示一些带有图像和文本的内容块，比如个人信息卡片、文章列表等。

结构

CSS 媒体对象一般由两个部分组成：

• 对象容器（object container）：包含媒体对象的容器，一般是一个 <div> 元素，可选样式 media-object。
• 对象内容（object content）：包含媒体对象的所有内容，通常由一个图片和一段文本组成。样式为 media-object-content。

<div class="media-object">
  <div class="media-object-content">
    <!-- 图片 -->
    <img src="" alt="" class="media-object-image">

    <!-- 内容 -->
    <h4 class="media-object-title">Title</h4>
    <p class="media-object-description">Description</p>
  </div>
</div>

样式

对象容器

对象容器一般用来定义媒体对象的布局和对齐方式。以下是一些常用的样式：

• media-object：设置对象容器为媒体对象。
• media-object-stack：将媒体对象堆叠在一起，而不是水平对齐。
• media-object-center：水平和垂直居中媒体对象。
• media-object-left：将媒体对象向左对齐。
• media-object-right：将媒体对象向右对齐。

对象内容

对象内容一般用来定义媒体对象的类型、样式和排列方式。以下是一些常用的样式：

• media-object-content：设置对象内容为媒体对象。
• media-object-image：设置图片的样式。
• media-object-title：设置标题的样式。
• media-object-description：设置描述的样式。
• media-object-section：将对象内容分为多个段落。

示例

下面是一个简单的示例，展示了如何使用 CSS 媒体对象来实现一个个人信息卡片：

<div class="media-object">
  <img src="avatar.png" alt="Avatar" class="media-object-image">
  <div class="media-object-content">
    <h4 class="media-object-title">John Doe</h4>
    <p class="media-object-description">Front-end developer</p>
    <p class="media-object-section">Email: john.doe@gmail.com</p>
    <p class="media-object-section">Location: New York, NY</p>
  </div>
</div>

结尾

CSS 媒体对象是一种常见的布局模式，可以帮助我们快速创建带有图像和文本的内容块。当然，还有更复杂的媒体对象，可以根据实际需要进行扩展。