施工実績や導入事例などで、サムネイル付きのリストを、横スクロールにする方法です。
1 2 3 4 5 6 7 8 9 10 11 12 | ul.list{ overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } ul.list li{ display: inline-block; width: 45%; margin: 10px; white-space:normal; vertical-align: top; } |
liのwhite-space:normalは、タイトルが長くなった時に、ulであらかじめwhite-space: nowrapにしちゃってるので、改行しないため、liで新たに追加しています。ですので、2行にならない構造であれば不要です。
またvertical-align: topは、画像の高さが違った場合、そのままだとした揃えになるので上に合うようにしています。