[英]Display two figures with figcaptions side by side html5
我在制作帶有無花果字幕的2x2圖片庫時遇到問題。
我想要這樣的東西:
----- -----
| | | |
----- -----
Text Text
----- -----
| | | |
----- -----
Text Text
但是我得到的是:
-----
| |
-----
Text
-----
| |
-----
Text
etc...
當附加了注釋注釋標簽時,將圖形顯示為塊似乎沒有幫助。
另一個問題是,Id希望它仍然能夠像原始標簽那樣在較小的屏幕上堆疊到1x4。
將圖像放入容器<div>
並使用@media查詢設置容器的寬度。 將圖像<div>
寬度設置為與圖像相同的寬度。 您將需要調整寬度設置以適合您的特定圖像。
參見jsfiddle的示例。
<style>
.container{width:600px;}
.photo{width:80px; font-size:80%; text-align:center; vertical-align:top; display:inline-block;}
@media screen and (min-width: 160px) {
.container{width:160px;}
}
@media screen and (min-width: 240px) {
.container{width:240px;}
}
@media screen and (min-width: 640px) {
.container{width:400px;}
}
</style>
<div class="container">
<div class="photo">
<img src="image.jpg" />
This is the caption
</div>
.
.
.
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.