CSSでこのようなグリッドレイアウトを実現することは可能ですか？
Cyra
これに似たレイアウトを実現したい
問題は、ボックスに1つのULのみを使用して、水平にする必要があることです。これが私が行ったことです：ULを作成し、その中のリストアイテムは互いに左に浮かんでいますが、これを達成する代わりに-これが何が起こるかです：
リストアイテムの2番目の行が、最初の行にネストされるのではなく、そのように配置される理由がわかりません。
Vikas Ghodke
あなたは列数と列ギャップによってそれを行うことができます
HTML
<ul>
<li>
<img src="http://placehold.it/200x300/" />
</li>
<li>
<img src="http://placehold.it/200x400/" />
</li>
<li>
<img src="http://placehold.it/200x500/" />
</li>
<li>
<img src="http://placehold.it/200x500/" />
</li>
<li>
<img src="http://placehold.it/200x400/" />
</li>
<li>
<img src="http://placehold.it/200x200/" />
</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
-moz-column-count: 3;
-moz-column-gap: 0px;
-webkit-column-count: 3;
-webkit-column-gap: 0px;
column-count: 3;
column-gap: 0px;
width: 660px;
margin: 10px;
}
li {
width: 200px;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
CSSグリッドを使用してこのレイアウトを実現するにはどうすればよいですか？
- 2
CSSとdivでこのレイアウトを実現するにはどうすればよいですか？
- 3
サイズ変更可能なヘッダー、フッター、サイドバーを使用して、このCSSグリッドベースのホーリーグレイルレイアウトを作成するにはどうすればよいですか？
- 4
このようなRecyclerview内でカスタムレイアウトを作成することは可能ですか？
- 5
このCSSレイアウトを実現するにはどうすればよいですか？
- 6
このような異なるサイズの子ウィジェットでグリッドビューを実現する方法はありますか？
- 7
Android、Java：ドラッグ可能なリストに複数のレイアウトを含めることは可能ですか？
- 8
ストーリーボードのボタンでこのレイアウトを実現するにはどうすればよいですか？
- 9
このレイアウトを適切に実現するにはどうすればよいですか？
- 10
レイアウトアンドロイドでこのデザインを実現するにはどうすればよいですか?
- 11
vlcでドッキングされたプレイリストをウィンドウを支配しないようにすることはできますか？
- 12
エピソード的なコンテキストで A3C アルゴリズムをトレーニングすることは実現可能ですか?
- 13
このテンプレートリテラル引数がcssグリッドレイアウトを変更するのはなぜですか？
- 14
CSS：このようなレイアウトを作成するにはどうすればよいですか？
- 15
グリッドレイアウトを使用して、固定/固定ヘッダー付きのテーブルを作成することは可能ですか？
- 16
このジグザグコレクションビューレイアウトを実現するにはどうすればよいですか？
- 17
グリッドレイアウトの別の列に基づいて列のコンテンツを中央揃えにすることは可能ですか？
- 18
このようなRailsミドルウェアを追加すると、無限のリダイレクトが発生するのはなぜですか？
- 19
データをストリーミング（アップロード）してGoogleクラウドストレージのバケットに保存し、同時にダウンロードできるようにすることは可能ですか？
- 20
計算なしでこの等距離のレイアウトを実現するにはどうすればよいですか？
- 21
無料のWindows10アップグレードを完全にオプトアウトすることは可能ですか？そうではないようです
- 22
Xamarin C＃-現在アクティブなレイアウトを確認することは可能ですか？
- 23
このレスポンシブグリッドレイアウトを作成するにはどうすればよいですか？
- 24
Android：どうすればこのようなレイアウトを実現できますか？
- 25
グリッドまたはフレックスを使用してこのスタイルを実現するにはどうすればよいですか？
- 26
JSや要素の重複なしでこのレイアウトを構築することは可能ですか？CSSのみですか？
- 27
Mesosのダウンタイムゼロのアップグレードまたは再構成を実行することは可能ですか？
- 28
アクティブなtmuxウィンドウのレイアウトツリーを変更することは可能ですか？
- 29
このようなウィジェットをフラッターにすることは可能ですか？
コメントを追加