div stacks images vertical

Question

Я делал (а) галерею изображений, используя имеено: inherit; которые помещают каждое изображение один за другим. это работало нормально, пока я не должен был добавить div для каждого изображения. Который затем заставил все изображения складываться следующим образом: this is an example

Я пробовал добавить позицию: inherit; для всех разделов, но это не решило проблему. и нет другого способа сделать то, что я должен делать без 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> 
 
<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

Добавление в редактирование, просто поместите текст (<p/>) внутри DIV и убедитесь, что элемент изображения внутри DIV является float:none;

EDIT: Не делайте все ваши DIV плавает по используя div{float:left;} RATHER: 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

еще одного примера:

div 
{ 
    display:inline-block; 
} 

DEMO UPDATED