これは簡単な問題のようですが、私はそれを解読できません。私はW3Schoolsでデモンストレーションされたような反応的な画像ギャラリーを設定しようとしています。あなたがキャプションの長さを変えるまで、そのギャラリーはうまく見えます。その後、ボックスの高さが変わり始め、ギャラリーの配置がすべて壊れてしまいます。キャプションの長さが2〜4行の範囲であっても、それらのボックスの高さをきちんと整列させるにはどうしたらいいですか?CSS画像ギャラリーの均等ボックスの高さを設定する
1
A
答えて
1
あなたができることの1つは、min-height
を与えて固定高さにすることです。
div.desc {
padding: 15px;
text-align: center;
min-height: 50px;
}
スニペット:
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
min-height: 50px;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>
0
あなたは2つのことができます。これらの両方を各ブロックに適用されるクラスに置きます。
overflow-y: hidden; //Or scroll if you want...
max-height: 400px;
関連する問題
- 1. 他の画像の画像の高さを設定する
- 2. NetBeansで画像ギャラリーを設定する
- 3. CSSの画像の高さ
- 4. 画像のCSS高さプロパティ
- 5. 画像ビューでギャラリー画像を設定する
- 6. CSS画像ギャラリーFloat BUG
- 7. HTML/CSSモザイク画像ギャラリー
- 8. 画像の高さを線の高さに設定するCSS経由の方法はありますか?
- 9. CSS:画像100%高さ - 50px
- 10. ギャラリーで画像の位置をCSSで
- 11. MATLABの非画像のヒストグラム均等化
- 12. cssを使って同じ高さと幅の画像を設定するには?背景画像なし
- 13. NextGen石工ギャラリーの画像サイズを設定する方法
- 14. 無限スクロール画像ギャラリー(CSS)の遅れ
- 15. CSSの画像ボタンを設定する - 画像:アクティブ
- 16. CSS Flexを使用して要素の高さを均等にする
- 17. ucブラウザで背景画像の高さを設定する
- 18. 画像の高さと幅を設定する
- 19. キャンバス画像の幅と高さを設定するには
- 20. CSS(カスケーディングスタイルシート)でASP.NETの画像の高さをpx /%に指定
- 21. 均等ボーダー左とのborder-right高さ
- 22. CSS背景 - 画像ストレッチの高さ
- 23. 画像の説明cssとhtmlの画像にあるボックス
- 24. 兄弟の高さをCSSでのみ均等化しますか?
- 25. 2 divの等高設定
- 26. css固定幅の画像と高さの自動調整
- 27. 画像ギャラリーにtitleプロパティを設定する
- 28. アップロード画像均等にディレクトリ構造に
- 29. 開かれた画像の幅/高さ(ギャラリー)
- 30. xmlによるAndroidギャラリーの問題設定画像サイズ
あなたはあなたのコードを投稿することができますか? – Tiffany