媒体对象

媒体对象 是面向对象 CSS 的典型代表 (OOCSS). 它的简单实用让很多 CSS 开发者(包括我自己)转向了 OOCSS 开发方法。

但是像众多 CSS 布局技巧一样，媒体对象必须求助于各种奇技淫巧来达成目标。

媒体对象的正文不能出现在头像的下边，通过创建一个 块格式化上下文(block formatting context) 或者使用一个与图片等宽的左外边距(margin)/内边距(padding) 。媒体对象必须清除 body 的浮动，通过指定 overflow:hidden 或使用伪元素来达成。

有了 Flexbox 布局，一切都解决了。附带着，FLexbox 布局还允许我们设置任意设置头像的垂直对齐方式。我们可以轻松地把头像移到右边而不用改一行源代码。

基础示例

标准媒体对象

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.

标准媒体对象

Donec imperdiet sem leo, id rutrum risus aliquam vitae. Cras tincidunt porta mauris, vel feugiat mauris accumsan eget.

逆序媒体对象

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut. Integer gravida pharetra cursus. Nunc in suscipit nunc.

无图像

嵌套媒体对象

媒体对象标题

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.

Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie.

Vestibulum ac turpis non lacus dignissim dignissim eu sed dui. Proin a ligula sit amet massa malesuada mattis eu a ante. Nunc porttitor sed quam quis sollicitudin. Vestibulum ac turpis non lacus dignissim dignissim eu sed dui.

Rutrum risus aliquam vitae.

媒体对象标题

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut.

Donec imperdiet sem leo, id rutrum risus aliquam vitae.

Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie. Aliquam vitae pharetra dolor. Nullam non mattis nunc.

HTML 代码

<div class="Media">
    <img class="Media-figure" src="" alt="" />
    <p class="Media-body">&hellip;</p>
</div>

CSS 代码

.Media {
    display: flex;
    align-items: flex-start;
}

.Media-figure {
    margin-right: 1em;
}

.Media-body {
    flex: 1;
}

在 Github 中查看这个 demo 中完整的媒体对象组件 源代码