0

固定幅の % ベースのグリッドがあります (今のところ)。コードは、この css-tricks 記事に基づいています: http://css-tricks.com/dont-overthink-it-grids/

同じサイズのレスポンシブ画像が複数あり、隣同士に積み重ねる (フローティングする) 必要がある列ができるまでは、うまく機能します。パディングの問題などにより、3 つの画像すべてが同じ幅と高さで表示されるわけではありません。最後のものは常に背が高いです。これは問題を示すコードペンです: http://codepen.io/joshmath/pen/dEuIv

これについて何か助けていただければ幸いです。私は以前にこの問題に遭遇したことがあり、常にケースバイケースでハッキングすることになります. ありがとう！

4

2 に答える 2

1

何らかの理由で、最後の要素から padding-right: 0 スタイルを削除すると、問題が修正されます。

パディングを使用して要素間にスペースを追加しようとしているようです。Chrome 開発ツールを使用して代わりに試したのは、パディングの代わりにマージンを使用し、要素の幅を約 29.5% にわずかに減らすことでした。それはうまくいったようです。

于 2013-04-24T17:27:40.273 に答える
0

以下をcssに追加するだけです。サイズを好きなように設定すると、グリッド内のすべての画像がそのサイズのままになります。代わりに、高さ/幅のパーセントを使用して拡大/縮小する必要がある場合。

.grid img { 幅: 350px; 高さ: 400px; }

于 2013-04-24T17:27:47.193 に答える