html - Div 2 Column Set Set using images and block-links inline-block 不起作用 - Shopify/liquid

Question

感谢您对我的耐心等待，希望有人能帮我解决这个问题。 OLD JSFiddle 已经被操纵了很多次，我刚刚离开了我最后的地方。我已经开始了一个新的，希望朝着更清洁、更好的方向发展。我不是专业人士，所以我也不知道每条规则，尤其是 CSS。谢谢。

重要的事情:

旧 JSFIDDLE:https://jsfiddle.net/Craftworksatb/qot0aj9h/18/

新 JSFIDDLE:https://jsfiddle.net/Craftworksatb/h4L3dyLw/

我正在与 Shopify 的 Liquid 合作，试图修复索引页面，使其看起来不像是一堆乱七八糟的产品集合在整个页面上飞来飞去。所以这就是我决定想出一个全新的烂摊子的地方:

基本上我想做的所有事情(经过数小时的摆弄、摆弄和定位、显示、谷歌搜索等，再次，不是专业人士)我想做的就是有两列设置2 张不同大小的图像，其中一张图像(家具画廊)具有与之关联的链接，您将在 OLD JSFiddle 中看到。第二列在第二列中有 3 个不同大小的图像，这些是基本链接。您将在 OLD Jsfiddle 中看到这种布局。我一直在想我要去某个地方，但是..正如你所看到的，我有点卡住了。我启动了最新的 JSfiddle 来缩小我做错的范围..

最新代码如下:

HTML:

    <div id="mid-page" class="container padded-row">
  <div id="furni-card" class="mcard">
    <img src="https://cdn.shopify.com/s/files/1/0805/3379/files/Furni-clickd.jpg?12824279880080276008" class="furniture-gall-card container" alt="">
    <a href="https://www.peterboroughcraftworks.ca/collections/Furniture-Gallery" class="fg-link"> </a>
    <a href="https://www.peterboroughcraftworks.ca/collections/dining-furniture" class="df-link"> </a>
    <a href="https://www.peterboroughcraftworks.ca/collections/coffee-and-end-tables" class="cef-link"> </a>
    <a href="https://www.peterboroughcraftworks.ca/collections/office-furniture" class="offi-link"> </a>
    <a href="https://www.peterboroughcraftworks.ca/collections/bedroom" class="bed-link"> </a>
    <a href="https://www.peterboroughcraftworks.ca/collections/living-and-entertainment" class="lae-link"> </a>
    <a href="https://www.peterboroughcraftworks.ca/collections/bars-islands" class="bii-link"> </a>

    <div id="cusm">
      <a href="https://www.peterboroughcraftworks.ca/pages/furniture-options">
        <img border="0" alt="Hooks & Knobs" src="https://cdn.shopify.com/s/files/1/0805/3379/files/cusm.jpg?12667808716500648615" height="223" width="312">
      </a>
    </div>

  </div>



  <div id="produside" class="mcard">
    <div id="shop-new">
      <a href="https://www.peterboroughcraftworks.ca/collections/craftworks-store">
        <img border="0" alt="Shop Online Now!" src="https://cdn.shopify.com/s/files/1/0805/3379/files/welcome-spring.jpg?16540889492977978359" width="640" height="435">
      </a>
    </div>

    <div id="hooksk">
      <a href="https://www.peterboroughcraftworks.ca/collections/hooks-knobs">
        <img border="0" alt="Hooks & Knobs" src="https://cdn.shopify.com/s/files/1/0805/3379/files/Hooksknobs.jpg?9884174894376543046" width="640" height="217">
      </a>
    </div>


    <div id="spabeaut">
      <a href="https://www.peterboroughcraftworks.ca/collections/spa-beauty">
        <img border="0" alt="Spa & Beauty" src="https://cdn.shopify.com/s/files/1/0805/3379/files/beautyspa.jpg?9884174894376543046">
      </a>
    </div>

  </div>
</div>

*请注意，填充行和容器的类已在完整样式表中定义，下面的部分只是一个片段。也许其他 CSS 覆盖了我的新 CSS？

CSS:

     #midpage .container .padded-row {
max-width: 900px;
margin: auto;
position: relative;
  }


#furnicard .mcardl {
display: inline;
vertical-align: top;
max-width: 100px;

}

#produside .mcardr {
vertical-align: top;
width: auto;
}


  .mcardl {
    display: inline;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;  
   position: absolute;
   top: 0px;
   left: 0px;
}
.mcardr {
    display: inline;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto; 
    position: absolute;
    top: 0px;
    right: 0px;
}

@media only screen and (min-width: 480px) and (max-width: 900px) {

  .mcardl {
    display: block;
    width: 100%;
    clear: both;
  }
  .mcardr {
    display: block;
    width: 100%;
  }

  #furnicard .mcardl {
   display: inline;
vertical-align: top;
max-width: 100px;


}

#produside .mcardr {
    vertical-align: top;
width: auto;

}
  }

我知道如何需要将这个 css 合并到那里。我是否应该有一个链接类，然后在 HTML 中为它做内联样式？

a.fg-link {
  display: inline;
  height: 640px;
  width: 312px;
  z-index: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0;
}

a.df-link {
  display: inline;
  text-align: center;
  height: 150px;
  width: 150px;
  z-index: auto;
  position: absolute;
  left: 10px;
  top: 60px;
  margin: 0;
}

a.cef-link {
  display: inline;
  text-align: center;
  height: 150px;
  width: 150px;
  z-index: auto;
  position: absolute;
  left: 160px;
  margin: 0;
  top: 60px;
}

a.offi-link {
  display: inline;
  text-align: center;
  height: 150px;
  width: 150px;
  z-index: auto;
  position: absolute;
  left: 10px;
  margin: 0;
  top: 210px;
}

a.bed-link {
  display: inline;
  text-align: center;
  height: 150px;
  width: 150px;
  z-index: auto;
  position: absolute;
  left: 160px;
  margin: 0;
  top: 210px;
}

a.lae-link {
  display: inline;
  text-align: center;
  height: 160px;
  width: 150px;
  margin: 0;
  z-index: auto;
  position: absolute;
  left: 10px;
  top: 380px;
}

a.bii-link {
  display: inline;
  text-align: center;
  height: 160px;
  width: 150px;
  margin: 0;
  z-index: auto;
  position: absolute;
  left: 160px;
  top: 380px;
}

回顾:

希望将布局缩小为 2 列，第一列包含 2 张图片，第二列包含三张图片。还需要将那些相应的链接放置在家具画廊图像的顶部(您将在 OLD JSfiddle 中看到)。这也需要响应手机/ipad/平板电脑，我不在乎它是否将它们推回垂直堆叠，只要它们填满媒体屏幕(因此媒体查询)...

那么大家怎么看呢？我知道这有点乱，我有很多问题，但我宁愿只在我的页面上找到定位，我可以以某种方式弄清楚其余部分!我感谢任何轻微的帮助或提示/技巧来解决这个问题!

Answer 1

我不得不说你是对的，这是一团糟，但我认为我已经完成了你想要做的事情。

一些学习技巧:

它有助于提出一个系统的结构问题。如果您首先定义类，则无需定义左右列 .mcardl 或 .mcardr。我只是把它叫做mcard

您必须仔细检查您在 html 中的类是否与您在 css 中声明的相匹配。你在 css 中缺少一些破折号。如果您将它们排除在外，您的样式将不会影响 html。

您不需要在每个断点的每个类中定义相同的属性，几乎每个类都有 vertical-align: top; 属性和 display-inline和身份证。

最后，对于您的容器，这是一个主要问题，如果您定义列，则无需 max-width: 1000px; 和定义 width: 900px;

我已经把它清理干净了。如果您有更多问题请告诉我，请参阅下面的 fiddle :

https://jsfiddle.net/gward90/h4L3dyLw/13/