私はあなたに忍耐強く感謝してくれます。 OLD JSFiddleは何度も操作されて、私が最後にやったところで中断しました。私はうまくいけば清潔でより良い方向に新しいものを始めました。私は専門家ではないので、私はすべてのルール、特にCSSを知らない。ありがとう。Div 2列画像とブロックリンクを使用して設定するインラインブロックが機能しない - Shopify/liquid
重要なもの：
OLD JSFIDDLE：https://jsfiddle.net/Craftworksatb/qot0aj9h/18/
NEW JSFIDDLE：私はShopifyの液体はそれが見えないように、インデックスページを修正しようとして働いているhttps://jsfiddle.net/Craftworksatb/h4L3dyLw/
ページのいたるところに飛んでいる製品コレクションの混乱。だから、ここで私は全く新しい混乱を思いつくことにした：
基本的に私はしたい（プロとではなく、 ）私がしたいのは、2つの異なるサイズの画像で設定された2つの列があり、それらの画像の1つ（Furniture Gallery）にOLD JSFiddleで表示されるようなリンクが関連付けられています。 2番目の列には、2番目の列に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を組み込むために必要な方法をいくつか..私は、リンクの1つのクラスを持っていたし、その後、ちょうど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枚の画像をフィーチャーし、最初の列、2列目でダウンレイアウトを取得するために探しています。また、対応するリンクを家具ギャラリーの画像の上に配置する必要があります（OLD JSfiddleに表示されます）。これはまた、携帯電話/ ipads /タブレットに応答する必要があるので、メディア画面（したがって、メディアクエリ）を埋める限り、彼らは垂直スタッキングにそれらをプッシュするかどうか気にしない...
あなたたちは思う？私はそれがちょっと混乱していることを知っています。私はたくさんの質問をしていますが、私はページの位置を落とすだけで、残りの部分を何とか見つけることができます！私はこれを解決するために少しの助けやヒント/トリックに感謝！
アハを！これは非常に近いです、イメージマップのアイデアを紹介してくれてありがとう。私はそれを聞いていない、より多くの研究を行う時間！私はこれをウェブサイトに適用しましたが、それでもすべてを垂直スタッキングに戻しています。それは、以前のCSSスタイルによってあらかじめ決められたものになるはずです。うーん。私はちょうど狩りを続けなければならないでしょうが、あなたの入力を読み込んでいただきありがとうございました。 –