divは画像を垂直方向に積み重ねます

Question

私はpossessionを使って画像ギャラリーを作っていました。それぞれの画像を順に並べています。これは、各画像にdivを追加するまでうまくいきました。どのような画像をこのようにスタックさせたのですか？this is an example

私は位置を追加しようとしました：継承;すべてのDivsに送信しましたが、問題を修正しませんでした。私がdivsなしでやらなければならないことをする他の方法はありません。

ヘルプは高く評価されます。

<div> 
 
<div> 
 
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; position:inherit;" ></a> 
 
</div> 
 
</div> 
 

 
<div> 
 
<div> 
 
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; position:inherit;" ></a> 
 
</div> 
 
</div> 
 

 
<div> 
 
<div> 
 
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; position:inherit;" ></a> 
 
</div> 
 
</div>

また、私は、画像が上の推移取得したときに、画像の下につくれするテキストを必要とし、このホバー機能を持ちます。 div{float: left;}を使用すると、テキストがイメージの右に来るようになります。

#main { 
 

 

 

 

 
} 
 

 
a { 
 
    color: blue; 
 
    position:inherit; 
 
} 
 

 
#hidden { 
 
    display:none; 
 
    color: orange; 
 

 

 
} 
 

 
#main:hover #hidden { 
 
    display:block; 
 

 
    
 
    
 
    
 
} 
 

 
div{float: left;}

<div id="main"> 
 
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; " ></a> 
 
<div id="hidden"> 
 
<p>hi how are you</p> 
 
</div> 
 
</div>

Answer 1

div{float:left;} ラッパー：do #img_div_id{float:left}（あなたがページ全体のすべてのdivをcoureの左に浮かべないようにしない限り）

Answer 2

あなたはfloat: left;

div{float: left;}

<div> 
 
<div> 
 
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:200px;height:200px; position:inherit;" ></a> 
 
</div> 
 
</div> 
 

 
<div> 
 
<div> 
 
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:200px;height:200px; position:inherit;" ></a> 
 
</div> 
 
</div> 
 

 
<div> 
 
<div> 
 
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:200px;height:200px; position:inherit;" ></a> 
 
</div> 
 
</div>

Answer 3

ワン・モア例を使用して1行でイメージを作ることができます。

すべてのdivのは、で浮動しないでください：ただのdiv内のテキスト（ <p/>）を入れて、divの内側の画像要素が float:none;

EDITであることを確認して、あなたの編集に追加する

DEMO UPDATED