0

ギャラリーに表示したい画像がたくさん浮かんでいます。それらはきちんと並んで表示されるはずです。それらはすべて同じサイズなので、ul のすべての li を左に浮かせて " display: block;."に設定するだけでこれを行うことができると考えました。

代わりに、彼らはこれを行っています: http://packardcarbs.myshopify.com/products/standard-8-1929-1931

合言葉は「あたすか」

4

5 に答える 5

2

すべての画像が同じ高さではありません。最初の行の最初の画像は高さ 149 ピクセルで、次の 2 つは高さ 146 ピクセルです。したがって、次の行に分解すると、画像は元の最初の画像の 3px 上と左から始まります。それらをきれいなグリッドに正しく並べたい場合は、それらがすべて同じ高さであることを確認する必要があります。

すべてのリスト項目にa を適用するheight: 160pxと問題が解決します (最も高い画像の高さは 160px です)。

于 2013-02-15T07:56:19.670 に答える
0

私が見るところから、あなたもこれを行うことができます：

ul#thumbs li a {
   display:block;
   width:160px;
   height:160px;
   overflow:hidden;
}

このように、画像は高さに関係なく整列します（より高い場合、画像の一部は非表示になります160px;）

また、要素にのがありmargin-rightます。（使い勝手が悪い）、問題なく作れます。12.5pxli15 px

于 2013-02-15T08:31:13.660 に答える
0

これは、右にマージンを追加し、4 番目の項目が の中に収まらないために発生しますul。マージンが必要な場合は、for ループなどが必要になり、4 番目の要素にクラスを追加する必要がありますmargin:0。または、減らすだけmargin-right:15pxですべて収まります。

于 2013-02-15T08:01:27.123 に答える
0

margin-right: 20 を削除すると、うまく整列しました。

于 2013-02-15T07:55:23.197 に答える
0

マージンを削除すると、整列します...

于 2013-02-15T07:56:49.743 に答える