需要一些帮助 HTML/CSS

Question

当我在我的 product-liquid (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

(点击运行查看:))

Answer 1

您最后缺少 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>

Answer 2

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

需要一些帮助 HTML/CSS

Need some help HTML/CSS

html

css

shopify