媒体对象模式是：左侧为图像元素，右侧为标题和文本。
这就是 Nicole Sullivan 所称，并且 名称沿用至今。这是一个非常简单的模式，但就像所有网页设计一样，它可以有多种实现方式。
让我们尝试一下很多方法。在这些演示中，我并没有特别关注命名约定、语义或浏览器支持。只是可能性。
使用浮动
当然，我们可以将图像浮动到左侧！
查看 CodePen 上 Chris Coyier 的示例 媒体块 #1 (@chriscoyier) 。
但是仅仅浮动会导致文本换行。换行可能是完全可以的，或者你可能不希望它发生。
为了解决这个问题，我们可以确保所有文本都包装在一个元素中，然后确保该元素的左侧填充等于图像的宽度以及它们之间的任何空白。
查看 CodePen 上 Chris Coyier 的示例 媒体块 #2 (@chriscoyier) 。
或者，你可以两侧都浮动
查看 CodePen 上 Chris Coyier 的示例 媒体块 #3 (@chriscoyier) 。
使用 Flexbox
Flexbox 使其变得非常简单！
查看 CodePen 上 Chris Coyier 的示例 媒体块 #4 (@chriscoyier) 。
请注意，我们允许<img> 成为 flex 项目。我们使用align-items: flex-start; 来确保它不会拉伸到与文本相同的高度。
使用表格
媒体对象可以是表格的一行两列。
查看 CodePen 上 Chris Coyier 的示例 媒体块 #5 (@chriscoyier) 。
如果要保留非<table> 标记，仍然可以通过display: table; 使其表现得像表格。
查看 CodePen 上 Chris Coyier 的示例 媒体块 #6 (@chriscoyier) 。
使用 Grid
网格布局允许我们定义一组列。非常容易设置第一列为我们想要的固定宽度，第二列占用剩余的空间。
查看 CodePen 上 Chris Coyier 的示例 媒体块 #7 (@chriscoyier) 。
与 flexbox 一样，我们可以通过使用align-self: start; 将图像对齐到顶部来避免图像自身拉伸。
我相信你们还能找到大约十几种方法来实现它！
关于更多方法的一些想法
嗨，Chris，
这很有趣，因为我认为你忽略了最常见的模式，即将图像/浮动元素的同级元素设置为新的块级格式化上下文 (http://codepen.io/thierry/pen/JEOavP)。之所以这是最常见的模式，是因为它不需要知道“媒体”的宽度。
顺便说一句，这种结构只不过是一个两列布局，但很多人很难将这种样式与除“媒体对象”之外的任何东西联系起来…… :-(
相同。我总是这样做。将“文本内容”包装在一个 div 中并将其设置为 overflow: hidden。
是的！这是一个很棒的方法。
我不知道如何衡量“最常见”，但我认为它是“Bootstrap 做的任何事情”，有趣的是，在“最新稳定版本”中，它是
table-cell。在 v4 中它是 flexbox，这肯定是我大脑的首选。“最常见”是指它是最古老的方法，这意味着它也拥有（迄今为止）最好的浏览器支持。它唯一的问题是当该框是包含块并且您需要将嵌套元素定位到其外部时。
无论如何，我们很快就会有一种方法来轻松地解决这个问题，而不是使用
table-cell或flexbox（Bootstrap 式），而是使用display:flow-root。这太棒了！谢谢。
我喜欢相对于容器绝对定位图像，然后对容器进行填充。这避免了将内容包装在额外的容器中。
使用 display:table 的主要好处是可以垂直对齐图像类和文本类内容，并且比 Flexbox 具有更好的浏览器支持。
在这种形式下，它通常被称为 Flag 对象，由 Harry Roberts 推广。
值得注意的是，图像类内容也可以是文本（或任何其他内容），例如它可能包含日期。重要的是必须设置其子元素的宽度。
我普遍使用 Flag 对象，除非您需要支持<IE8，否则没有内在原因使用带有浮动的传统媒体对象。
这些 Flag 对象还可以嵌套和组合。这就是它们真正强大的地方。尤其是在与强大的网格系统配对时。我只有偶尔使用 Flexbox，组合这些组件的力量就是如此。
嗨，
一篇很棒的文章。
关于 flexbox - 当您必须支持所有设备和浏览器时，它总是很棘手……它会导致很多问题……
如果您使用 autoprefixer 并了解其特性 (https://github.com/philipwalton/flexbugs)，它实际上非常可靠/稳定 - 我个人不使用旧语法（或中间语法），而是回退到其他方法。Flexbox 比旧的布局模型更有效率，也更推荐 - https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#use_flexbox_over_older_layout_models
或者与上面相同，但
使用浮动