web-dev-qa-db-ja.com

数が6未満の場合に3x2サムネイルを配置するにはどうすればよいですか？

VR用のサムネイル選択メニューを作成しています。それらは3x2として配置されます。

enter image description here

サムネイルが6つ未満の場合、どのように整理すればよいですか？ （例：2または5？）

注：ユーザーは、両側の矢印をクリックすることで、サムネイルの前/次のバッチを表示できます。

gridimagevirtual-realityrearrangingthumbnail
13
alex

次のレイアウトを使用します。

不均一な量の画像（たとえば5）の場合、次のように表示しますOdd amount of pictures

写真が4つしかない場合は、次のように表示しますenter image description here

画像が2つしかない場合は、次のように表示しますenter image description here

このレイアウトを選択する理由は、画像が中央であり、サイド矢印や下にあるボタンなどの他の視覚要素との関係にあるという事実に基づいています画像なので、すべてのコンテンツはグリッドの中心点から取得されます。

すべての画像は列の点で同じサイズになるため、一部の画像が他の画像よりも大きい場合、それらはmightが重要/より関連性があるとユーザーが誤解することはありません。

24
Joao Carvalho

bootstrapレスポンシブグリッドは、部屋の数に応じて動的に変化します。たとえば、部屋が2つしかない場合、ボックスは次のようになります。より大きく、画面上のより広い場所をカバーします。

5部屋ある場合は、やることはあまりありません。画像では、2つの異なる配置方法を使用しています。 1つ目はグリッドに一致し、2つ目は画面にバランスします。整合性とバランスを決定する必要があります。ユーザーエクスペリエンスについては、グリッドは非常に明確であると思うので、それほど重要ではありません。

Demonstration

6
Dimitra Miha

次のような対称性が必要な場合：

2：

[__][__]

3：

[__][__]
  [__]

4：

[__][__]
[__][__]

5：

[__][__][__]
  [__][__]

6：

[__][__][__]
[__][__][__]

3つの画像が横に並んでいることはわかっていますが、配置規則の一貫性を維持したいので、ユーザーに驚きはありません。

6
SparK

フレックスボックスを使用してグリッドを作成し、グリッドの子アイテムの幅に独自の幅を決定させ、アイテムを水平方向に中央揃えにします。

            <div class="flexbox">
      <div class="flex-child">…</div>
      <div class="flex-child">…</div>
      <div class="flex-child">…</div>
    </div>

    .flexbox {
      display: flex;
      flex: 0 1 auto;
      flex-flow: row wrap;
      justify-content: center;
    }
2
Seth Warburton