大きな画像と小さい画像のテキスト

Question

最終的に画像ギャラリーを作るコードが見つかりました。

しかし、どのようにテキストを置くことができるのかわかりません。

私は多くのことを試しましたが、動作しないか、反応しません。

コード：

img { 
 
    float: left; 
 
} 
 

 
img.large { 
 
    width: 70%; 
 
    margin-bottom: -2px; 
 
} 
 

 
img.small { 
 
    width: 30%; 
 
    margin-bottom: -1px; 
 
} 
 

 
.wrapper { 
 
    overflow: hidden; 
 
}

<div class="wrapper"> 
 
    <a href="#"><img alt="Test Large" class="large" src="http://prizem.dreamhosters.com/test/test_large.jpg"></a> 
 
    <a href="#"><img alt="Test Small 1" class="small" src="http://prizem.dreamhosters.com/test/test_small_1.jpg"></a> 
 
    <a href="#"><img alt="Test Small 2" class="small" src="http://prizem.dreamhosters.com/test/test_small_2.jpg"></a> 
 
</div>

JSFiddle：http://jsfiddle.net/gxb33ex5/1/

感謝。

Answer 1

"クリーン"な方法があるかもしれませんが、あなたが何をしているかを達成するためにおそらくやることは、CSSファイルの画像ソースを定義することです。タグの代わりにdivを使用すると、タグ内に他のコンテンツを配置することができます。これと同じように：

a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 

 
.wrapper div { 
 
    display: inline-table; 
 
    
 
    } 
 

 
/* Large image */ 
 
.img1 { 
 
    float: left; 
 
    text-align: center; 
 
    width: 70%; 
 
    height: 300px; 
 
    background-image: url('http://prizem.dreamhosters.com/test/test_large.jpg'); 
 
} 
 

 
/* Small image */ 
 
.img2 { 
 
    text-align: center; 
 
    width: 30%; 
 
    height: 150px; 
 
    background-image: url('http://prizem.dreamhosters.com/test/test_small_1.jpg'); 
 
} 
 

 
/* Small image */ 
 
.img3 { 
 
    text-align: center; 
 
    width: 30%; 
 
    height: 150px; 
 
    background-image: url('http://prizem.dreamhosters.com/test/test_small_2.jpg'); 
 
}

<div class="wrapper"> 
 
<a href="#"> 
 
<div class="img1"> 
 
<p> 
 
My Text 
 
</p> 
 
</div> 
 
</a> 
 

 
<a href="#"> 
 
<div class="img2"> 
 
<p> 
 
My Text 
 
</p> 
 
</div> 
 
</a> 
 

 
<a href="#"> 
 
<div class="img3"> 
 
<p> 
 
My Text 
 
</p> 
 
</div> 
 
</a> 
 
</div>

Answer 2

あなたは絶対にテキストの位置を設定しようとしたことがありますか？