gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 10:31:27 25 4
gpt4 key购买 nike

感谢您对我的耐心等待,希望有人能帮我解决这个问题。 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/平板电脑,我不在乎它是否将它们推回垂直堆叠,只要它们填满媒体屏幕(因此媒体查询)...

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

最佳答案

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

一些学习技巧:

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

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

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

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

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

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

关于html - Div 2 Column Set Set using images and block-links inline-block 不起作用 - Shopify/liquid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36458087/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com