需要一些帮助 HTML/CSS [关闭]答案

【问题标题】：Need some help HTML/CSS [closed]需要一些帮助 HTML/CSS [关闭]
【发布时间】：2019-12-20 01:36:43
【问题描述】：

当我在我的产品液体（shopify）中添加以下代码时，整个页面被破坏，更改字体并且添加到购物车按钮改变形状......

代码在这里：

<div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">
<div class="container">
  <div class="icon-box">
    <div class="item " style="width: 33.333333333333336%">
      <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image3.png?v=1576699921">
      <label>Satisfait ou Remboursé </label>
    </div>    
    <div class="item " style="width: 33.333333333333336%">
      <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image1.png?v=1576699921">
      <label>Meilleur prix</label>
    </div>    
    <div class="item " style="width: 33.333333333333336%">
      <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image2.png?v=1576699921">
      <label>Paiement 100% sécurisé</label>
      
      <div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">

<link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/colors.scss.css?1306" rel="stylesheet"  type="text/css" />

<link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/custom.scss.css?1306" rel="stylesheet"  type="text/css"  />
      
      
    </div>
    
  </div>

Demo

(点击运行查看:))

【问题讨论】：

我是开发新手
很确定它正在影响具有同一类的其他元素。我建议您聘请 Shopify 开发人员进行更改。
请在问题本身中包含与问题相关的代码，最好是minimal reproducible example，不要让我们离开网站来帮助您。
您缺少多个</div> 标签，并且shopify-section-product-icon-gallery 不是唯一ID。 ID 必须是唯一的，并且所有结束标记都是必需的，否则以下元素的格式将不正确。

标签： html css shopify

【解决方案1】：

您缺少一些</div> HTML 标记。将 HTML 视为一个堆栈 - 对于您放置的每个标签，您都需要等效的结束标签（在这种情况下，您的 <div> 标签比 </div> 标签多）。在少数情况下需要结束标签（在您当前的代码中，<img> 和 <link> 标签不需要结束标签）。

【讨论】：

不要回答未在问题中提供标记或代码的问题，而仅提供指向某些第三方的链接。此类问题将被关闭。并非所有问题都应该回答：How To Answer 投票关闭它们。
即使有您的建议，代码仍然无效，因为id="shopify-section-product-icon-gallery" 出现了两次。
@EGC - 这是正确的（由于 HTML id 重复，它仍然不是有效的 HTML），但是拥有多个 HTML id 不会破坏问题中描述的页面布局。
当然，只有缺少的标签破坏了这个布局，但是this discussion 更详细地强调了使用重复 ID 的潜在风险和明显的非法行为。值得讨论整体代码的潜在问题并为最初的问题提供答案。

【解决方案2】：

您最后缺少 3 个结束 div 标记 (</div>)。这将导致 shopify 样式应用于代码之后的所有内容。添加 3 个结束 div 标签，应该没问题。

我已添加评论，请参见下面的代码：

 <div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">
    <div class="container">
        <div class="icon-box">
            <div class="item " style="width: 33.333333333333336%">
                <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image3.png?v=1576699921">
                    <label>Satisfait ou Remboursé </label>
            </div>
            <div class="item " style="width: 33.333333333333336%">
                <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image1.png?v=1576699921">
                    <label>Meilleur prix</label>
            </div>
            <div class="item " style="width: 33.333333333333336%">
                <img src="https://cdn.shopify.com/s/files/1/0259/5884/2477/files/image2.png?v=1576699921">
                <label>Paiement 100% sécurisé</label>
                <div id="shopify-section-product-icon-gallery" class="shopify-section product-icon-gallery">
                    <link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/colors.scss.css?1306" rel="stylesheet"  type="text/css" />
                    <link href="//cdn.shopify.com/s/files/1/0262/4493/9862/t/2/assets/custom.scss.css?1306" rel="stylesheet"  type="text/css"  />
                </div>
            </div>
    <!-- You were missing the tags below -->
        </div>
    </div>
</div>

【讨论】：

不要回答未在问题中提供其标记或代码的问题，而仅提供指向某些第三方的链接。此类问题将被关闭。并非所有问题都应该回答：How To Answer 投票关闭它们。
此代码仍然无效。 id="shopify-section-product-icon-gallery" 出现两次。