div 垂直堆叠图像

Question

我正在使用 possition:inherit 制作图片库；将每个图像一个接一个地放置。在我不得不为每张图片添加 div 之前，这一切都很好。然后导致所有图像像这样堆叠 this is an example

我尝试添加 position:inherit；所有 div s，但它没有解决问题。如果没有 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

您可以使用 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 2

再举一个例子：

div
{
  display:inline-block;
}

DEMO UPDATED

Answer 3

添加到您的编辑中，只需将文本 (<p/>) 放入 div 并确保 div 中的图像元素为 float:none;

编辑：不要使用 div{float:left;} 让你所有的 div 浮动相反：做 #img_div_id{float:left}（除非你希望整个页面上的每个 div 都浮动在 coure 的左边 :)）

div 垂直堆叠图像

div stacks images vertically

html

css

position