Question

我正在使用possition创建一个图片库：inherit;它将每个图像一个接一个地放在一起。这工作正常，直到我不得不为每个图像添加div。然后，这导致所有图像堆叠如此this is an example

我尝试添加position：inherit;所有的div，但它没有解决问题。除了div之外没有其他方法可以做到这一点。

任何帮助都会得到赞赏。

＆＃13;

<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>

＆＃13;

我也有这个悬停功能，当图像悬停在图像下方时，我需要将文本显示在图像下方。使用div{float: left;}使文本出现在图像的右侧。

＆＃13;

#main {




}

a {
    color: blue;
    position:inherit;
}

#hidden {
    display:none;
    color: orange;


 }

#main:hover #hidden {
    display:block;

    
    
    
}

div{float: left;}

＆＃13;

<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>

＆＃13;

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

再举一个例子：

#include<stdio.h>

#define MAX_SIZE 12

int readInventory(char filename[], int item[], float price[]);


int main(void)
{
    int item[MAX_SIZE], i;
    float price[MAX_SIZE];
    char filename[MAX_SIZE];
    for ( i = 0; i < MAX_SIZE; i++ )
    {
      readInventory(filename, &item[i], &price[i]);
      printf("\n%d %.2f\n", item[i], price[i]);
    }
    return 0;
}


int readInventory(char filename[], int item[], float price[])
{

    FILE *inventory;
    int i;

    inventory = fopen("inventory.dat", "r");


    for ( i = 0; i < MAX_SIZE; i++ )
    {
      fscanf(inventory,"%d%f", &item[i], &price[i]);         
      return 1;
    }
    fclose(inventory);
    return 0;
}

DEMO UPDATED

Answer 3

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

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

div垂直堆叠图像

3 个答案: