blob: 382e4bacce69715e7b3352c8c9da1b3764a2c839 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: '指南: 媒体对象'
slug: Web/CSS/Layout_cookbook/媒体对象
tags:
- 媒体对象
- 布局
- 指南
- 浮动
- 网格
translation_of: Web/CSS/Layout_cookbook/Media_objects
---
<div>{{CSSRef}}</div>
<p class="summary">媒体对象是web上随处可见的一种模式。它由<a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Nicole Sullivan</a>命名，表示一种一侧是图片并且另一侧是描述性的文字的两列盒子，比如一篇facebook帖子或者tweet。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
<h2 id="要求">要求</h2>
<p>媒体对象模式需要以下特性的一些或者全部：</p>
<ul>
<li>在移动设备上被堆叠，在桌面设备上显示两列</li>
<li>图片可以在左边，也可以在右边</li>
<li>图片可以是小图，也可以是大图</li>
<li>媒体对象可以被嵌套</li>
<li>无论哪边更高，媒体对象应该清除内容</li>
</ul>
<h2 id="使用指南">使用指南</h2>
<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
<div class="note">
<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Download this example</a></p>
</div>
<h2 id="做出选择">做出选择</h2>
<p>我选择使用<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a>实现媒体对象，因为它可以让我在我需要的时候控制两个维度的布局。这意味着当我们有一个页脚（footer）的时候，上面的内容很短，页脚可以被推到媒体对象的底部。</p>
<p>另一个使用网格布局（Grid Layout）的原因是为了可以使用{{cssxref("fit-content")}}图片的追踪（track）大小。通过使用 最大尺寸是200像素的<code>fit-content</code> ，当我们有一个小图片比如icon的时候，track仅仅得到和image的尺寸一样的大小（<code>max-content</code> 大小）。如果图片更大，track在200像素的时候停止增长，因为图片应用了{{cssxref("max-width ")}}为100%。同样，它会缩小以适应列内部的尺寸。</p>
<p>通过使用{{cssxref("grid-template-areas")}} 来实现布局，我可以看到CSS中的这个模式。我定义我的网格，其并且设置最大宽度（max-width）为500像素，因此在较小的设备上媒体对象会被堆叠起来。</p>
<p>模式的一个选项是翻转它将图片切换到另一边——这通过添加<code>media-flip</code> 类来实现，它定义了一个翻转的网格模板所以布局被镜像了。</p>
<p>当我们在另一个媒体对象之中嵌套一个媒体对象，我么你需要将它放到常规布局的第二个track中，当翻转时放到第一个track中</p>
<h2 id="回退方案">回退方案</h2>
<p>对于这种模式有很多种可能的回退方案，取决于你希望支持的浏览器。一个比较号的方案是将图片浮动到左边，并且为盒子添加clearfix来确保它包含浮动元素。</p>
<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
<div class="note">
<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Download this example</a></p>
</div>
<p>一旦浮动元素成为网格项，浮动将不再被应用到网格上，因此你不需要做任何特殊的事情来清楚浮动。</p>
<p>你需要做的事情是移除应用到这些items的任何边界，以及我们在一个网格上下文中不需要的任何宽度（在网格中我们有{{cssxref("gap")}}属性来控制它，并且track控制了尺寸）。</p>
<h2 id="MDN上相关的资源">MDN上相关的资源</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Progressive Enhancement and Grid Layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Using Grid Template Areas</a></li>
<li><a href="/en-US/docs/Web/CSS/fit-content">fit-content</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid-template-areas</a></li>
</ul>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>.各种各样的布局方法有不同的浏览器支持。查看下面的图表得到属性的基本支持的细节。</p>
<p>这个页面中的兼容性表格由结构数据生成。如果你想对数据做贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并且给我们发送一个pull request。</p>
<h4 id="grid-template-areas">grid-template-areas</h4>
<p>{{Compat("css.properties.grid-template-areas")}}</p>
<h4 id="float">float</h4>
<p>{{Compat("css.properties.float")}}</p>
|
