unslug zh-cn: move

1 files changed, 86 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/layout_cookbook/media_objects/index.html b/files/zh-cn/web/css/layout_cookbook/media_objects/index.html
new file mode 100644
index 0000000000..382e4bacce
--- /dev/null
+++ b/files/zh-cn/web/css/layout_cookbook/media_objects/index.html
@@ -0,0 +1,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>