リキッドレイアウトデザインで画像個性的配置

Question

初心者で独学なので説明も下手くそかと思います、ご了承お願いします。。。

WordPressでテーマを使用しながら、少しカスタマイズをしてホームページ制作を試みています。(｡--｡)
トップページで、
メインに画像を7点ほど、ランダムに配置をしたいのですが、（イメージはとんだ林蘭さんのウェブサイトリンク内容のような、、）
posion:absolute,relativeでpxで指定する以外に良い方法はありますか？
というのも、元々WordPressテーマで、レスポンシブ対応に自動的に設定されていて、それをパソコン、スマホ、タブレットでみても同じ見え方のリキッドレイアウトに変更したいと思い、色んなサイトを参考にさせてもらってメディアクエリなど、消去すれば良いとされる箇所は消し、レスポンシブ対応は解除されたはずですが、
px指定で画像を配置すると、パソコンサイズだとすごく配置がうまくいっているのに、どうしてもスマホサイズで収まりきれない値になってしまうようです。
リンク内容
このサイトを参考にしてリキッドレイアウトを試みましたが変化なく、、。
position指定を%で指定すると初めはうまく行きますが、絶妙な指定の配置が上手くいかず、途中で断念せざるを得なかったです。。。
どうか、お助けください。(;;)

リンク内容

Answer 1

返信遅くなってしまい、申し訳ございません。。
mhyさんのアドバイス通り、positionを vwで指定すると、全ての媒体で良い感じに配置できるようになりました！しかし、後半
高さがパソコンとスマホではだいぶ大きなズレが出てきてしまいます。どうしてでしょうか？？(_)????

Answer 2

vw で指定してはいかがでしょうか。

Comments

[nca]

返信遅くなってしまい、申し訳ございません。。貴重なアドバイスありがとうございます！！！

mhyさんのアドバイス通り、positionを vwで指定すると、全ての媒体で良い感じに配置できるようになりました！しかし、後半
高さがパソコンとスマホではだいぶ大きなズレが出てきてしまいます。なにがいけないのでしょうか？？(*_*)????

[Lhankor_Mhy]

実物を見てみないとなんとも言えませんが、「後半高さ」とはなんですか？

[nca]

毎回、速いレスポンスとってもありがたいです。。
初めの本文の1番下に、画像のリンクを貼ったので、それでイメージしていただくことは可能でしょうか？????
赤の番号順にdiv classを指定し、htmlを書いていて、4を1と同じ高さにしたいのですが、パソコンとスマホではだいぶズレが生じてしまうようです。
後半の高さとはこのことです????

[nca]

貼った画像が、私の理想とする画像の配置イラストです。

[Lhankor_Mhy]

top と left で vw 単位で統一して配置しているのであれば、1と4が配置されている垂直方向の場所がずれる、ということは起きないと思います。
別の要因かもしれないですね。

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/9zkuyer6/

[nca]

サンプルまで、、、????ありがとうございます。サンプルをみると考えられる要因としては、すべてabsoluteにするのがポイントですかね？私、なんとなく基本position:relative にしていて、5だけabsoluteに設定していました。あと、htmlの書き方を、高さ順（先程のイラスト番号　上から1→4→2→5→6→3→7→8）に変えてみたりと、試行錯誤してみている最中ですす。。。