0

同じ高さで幅が異なる画像がたくさんあります。各画像の下にテキスト キャプションが必要です。Rails (CSS、jQuery、Ruby などを含む) でギャラリーを構成して、画像の行をまとめて照合し、画像間に大きなスペースがないようにするにはどうすればよいですか?

現在、固定の列サイズで Bootstrap を使用しているため、多くのスペースが無駄になっています。各画像ラッパーをその画像の幅に合わせて縮小し、画像を画像間にほとんどスペースを入れずに行に配置したいと考えています。

また、各画像の下にテキスト キャプションも必要です。各画像とキャプションを含むラッパーの幅は、キャプションの幅と画像の幅の最小値に等しくする必要があります。

4

1 に答える 1

0

float:left;ラッパー div でCSS を使用します。次のような CSS を用意します。

.row-div{height:325px;width:auto;}
.wrapper-div {float:left;height:320px;margin-right:5px;}
.inner-div{height:20px;margin-right:5px;}

ただし、次の画像をいつ新しい .row-div に配置するか、いつ配置するかを (各画像の幅に基づいて) 決定するロジックが少し必要になります (JavaScript でこれを行うことをお勧めします)。同じ行。したがって、マークアップを動的に記述したいと思うでしょう。

これは一般的な方法ですが、詳細な情報がなければ完全な解決策を提供することは困難です。

于 2013-10-09T04:18:46.943 に答える