AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-layout

说明 一个常规的多用途容器元素,可将 AMP 强大的布局功能运用到任何元素上。
支持的布局 container、fill、fixed、fixed-height、flex-item、intrinsic、responsive

概述

借助 amp-layout 组件,您可以将基于宽高比的自适应布局应用于任何元素。amp-layout 组件与现有 AMP 组件的 layout 属性的工作原理相似,但前者支持用作子级的所有 HTML 标记。其他支持的布局均使用 amp-layout(例如 fixed-height、fixed 等)。

示例

此示例使用 amp-layout 在用内嵌 SVG 绘制的圆周围创建了一个自适应容器。

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
      抱歉,您的浏览器不支持内嵌 SVG。
    </svg>
  </amp-layout>

属性

此元素包含扩展到 AMP 组件的常见属性

验证

请参阅 AMP 验证工具规范中的 amp-layout 规则

需要更多帮助?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub