个人中心
gpt4 book ai didi

javascript - 标签 'width' 中的属性 'amp-carousel' 设置为无效值 'auto'

转载 作者：行者123 更新时间：2023-12-04 09:27:11 25 4
gpt4 key购买 nike 

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Reliant Industrial Supply</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link
      rel="canonical"
      href="https://http://www.reliantindustrialsupply.com/"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap"
    />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": ["logo.jpg"]
      }
    </script>
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >

    <style amp-custom>
      :root {
        --background: rgba(299, 299, 299, 0.95);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        font-family: "Work Sans";
      }

      /* navigation styles start here */

      .header {
        background: var(--background);
        text-align: center;
        position: fixed;
        z-index: 999;
        width: 100%;
      }

      .nav-toggle {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      .nav-toggle:focus ~ .nav-toggle-label {
        outline: 3px solid rgba(lightblue, 0.75);
      }

      .nav-toggle-label {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 1em;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .nav-toggle-label span,
      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        display: block;
        background: black;
        height: 2px;
        width: 2em;
        border-radius: 2px;
        position: relative;
      }

      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        content: "";
        position: absolute;
      }

      .nav-toggle-label span::before {
        bottom: 7px;
      }

      .nav-toggle-label span::after {
        top: 7px;
      }

      nav {
        position: absolute;
        text-align: left;
        top: 100%;
        left: 0;
        background: var(--background);
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      nav li {
        margin-bottom: 1em;
        margin-left: 1em;
      }

      nav a {
        color: black;
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
      }

      nav a:hover {
        color: #000;
      }

      .nav-toggle:checked ~ nav {
        transform: scale(1, 1);
      }

      .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
      }

      amp-carousel {
        padding-top: 20em;
      }

      @media screen and (min-width: 800px) {
        .nav-toggle-label {
          display: none;
        }

        .header {
          display: grid;
          grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
        }

        .logo {
          grid-column: 2 / 3;
        }

        nav {
          position: relative;
          text-align: left;
          transition: none;
          transform: scale(1, 1);
          background: none;
          top: initial;
          left: initial;

          grid-column: 3 / 4;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        nav ul {
          display: flex;
        }

        nav li {
          margin-left: 3em;
          margin-bottom: 0;
        }

        nav a {
          opacity: 1;
          position: relative;
        }

        nav a::before {
          content: "";
          display: block;
          height: 5px;
          background: black;
          position: absolute;
          top: -0.75em;
          left: 0;
          right: 0;
          transform: scale(0, 1);
          transition: transform ease-in-out 250ms;
        }

        nav a:hover::before {
          transform: scale(1, 1);
        }
      }

      amp-carousel {
        padding-top: 60em;
      }

      .content {
        background-color: dark-grey;
      }
      .Centered {
        text-align: center;
        font-family: "Work Sans";
        font-style: normal;
        font-weight: 300;
      }

      .left {
        margin: 2rem;
        font-family: 'Sora', sans-serif;
        font-style: normal;
        font-weight: 300;
      }

      .clearfix {
        overflow: auto;
        display: flex;
      }

      .footer {
          width: 100vw;
          display: block;
          overflow: hidden;
          padding: 20px 0;
          box-sizing: border-box;
          background-color: #18181a;
      }

      .innerFooter {
          display: block;
          margin: 0 auto;
          width: 1100px;
          height: 100%;
      }

      .innerFooter .logoContainer {
        width: 35%;
        float: left;
        height: 100%;
        display: block;
      }

      .innerFooter .footerThird {
        padding-left: 20px;
        width: calc(21.66666667 - 20px);
        margin-right: 10px;
        float: left;
        height: 100%;
      }

      .innerFooter .footerThird:last-child {
        margin-right: 0;

      }

      .innerFooter .footerThird h1{
        font-family: 'Work Sans';
        font-size: 22px;
        color: white;
        display: block;
        width: 100%;
        margin-bottom: 20px;
      }

      .innerFooter span {
        font-family: 'Work Sans';
        font-size: 12px;
        color: white;
      }
    </style>

    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
    ></script>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
  </head>
  <body>
  <div class="header">
    <amp-img src="https://i.imgur.com/vPr7fdQ.png" width="175px" height="50px">
    <input type="checkbox" id="nav-toggle" class="nav-toggle" />
    <nav>
      <ul>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
            >Home</a
          >
        </li>
        <li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Products/products_page.html">Products</a></li>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
            >Contact</a
          >
        </li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </div>



    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><span style="font-size: 46px;">Products</span></p>

    <amp-carousel
      layout="responsive"
      type="slides"
      height="900"
      width="auto"
      controls
      loop
      autoplay
      delay="3000"
      data-next-button-aria-label="Go to next slide"
      data-previous-button-aria-label="Go to previous slide"
    >
      <amp-img
        src="https://i.imgur.com/VjNbHoD.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/CFw62Qo.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/DSFCYpd.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/i2gLNZD.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/wxkmAop.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/x1s8gJs.png"
        width="1280"
        height="720"
      ></amp-img>
    </amp-carousel>

     <p style="text-align: center;"><span style="font-size: 46px;">Manufacturers</span></p>
<p style="text-align: center;"><br></p>
<table style="width: 100%; border-collapse: collapse; margin: 0px auto; border: groove;">
    <tbody>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><strong>Manufacturers</strong></div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><strong>Website</strong></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Sia Abrasives</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="https://www.siaabrasives.com/us/en/home/">https://www.siaabrasives.com/us/en/home/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Time Savers</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.timesaversinc.com/content/wood-sanders">http://www.timesaversinc.com/content/wood-sanders</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">AirVANTAGE Tools</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.airvantagetools.com/">http://www.airvantagetools.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Coilhose Pneumatics</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.coilhose.com/">http://www.coilhose.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">EAB Tools</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.exchangeablade.com/">http://www.exchangeablade.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Flex Trim Abrasives</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.flex-trim.com/">http://www.flex-trim.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Larick Machinery</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.larickmachinery.com/">http://www.larickmachinery.com/</a></div>
            </td>
        </tr>
    </tbody>
</table>

    <div class="footer">
      <div class="innerFooter">
        <div class="logoContainer">
          <amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
        </div>

        <div class="footerThird">
          <h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
          <h1>Phone Number:  (714) 287-6815 </h1>
        </div>

        <div class="footerThird">
          <span>Copyright 2020 Reliant Industrial Supply<span>
        </div>
    </div>
  </div>
  </body>
</html>
如果您查看 amp-carousel 标签，验证器会说 width: auto;是无效的。我尝试过一些解决方案，例如给它一个特定的像素数，但如果输入不同的数字，它只会保持在一个大小，直到我显着改变大小。我不认为这是一个错误，它可能在我身上，但它有时确实有效，我不知道为什么。有什么方法可以解决它，我该如何解决它。另外，请注意，有时当我粘贴代码时，它不会给我一个验证错误；这太奇怪了!感谢您的调查!

最佳答案

放大器 documentation :
“对于某些布局，AMP 组件必须具有包含 整数像素值的宽度和高度属性。”
所以不，不幸的是你不能拥有 width="auto" <amp-carousel> 中的属性.那是无效的。

but if [I] enter different numbers it just stays stuck to one size until I dramatically change the size.


我不完全确定您所说的“固定到一个尺寸”是什么意思，但是您将 amp-carousel 的 padding-top 设置为 20em，然后再次将其覆盖为 60em，这会导致元素对于 View 来说太高了使用合理的宽度和高度属性。我通过删除填充并将高度和宽度分别设置为 600 和 800 来测试它，对我来说看起来没问题。 
   <amp-carousel
      layout="responsive"
      type="slides"
      height="600"
      width="800" 
      ...

关于javascript - 标签 'width' 中的属性 'amp-carousel' 设置为无效值 'auto'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62967911/

25 4 0
文章推荐： javascript - 构造函数内部的这个循环有什么问题？ [JS]
文章推荐： r - 有条件地设置 RowGroup 的样式
文章推荐： algorithm - 对 FIFO 页替换算法的实际示例感到困惑？
文章推荐： PostgreSQL : NOT VALID constraint vs validation trigger
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com