Question

我正在努力制作像宝丽来的像。其中图像底部有文字。我尝试了每一条指令但未能这样做。

这是我的HTML代码

<div id="Places" class="gallery">
        <ul>
            <li>
                <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank">
                    <img src="images/babot1.jpg" alt="bobat1">
                </a>
            </li>
            <li>
                <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank">
                    <img src="images/lhouse1.jpg" alt="bobat1">
                </a>
            </li>
            <li>
                <a href="https://www.youtube.com/playlist?list=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2v" target="_blank">
                    <img src="images/babot1.jpg" alt="bobat1">
                </a>
            </li>
        </ul>
</div>

这是我使用的css代码

div.gallery{
border:2px solid #ddd;
margin:0 auto;
margin-top:100px;
margin-bottom:30px;
border-radius:3px;

width:98%;
}
div.gallery::before{
content: "";
clear: both;
display: table;
}
div.gallery ul{
list-style-type:none;
overflow:hidden;
margin:0 auto;
}
div.gallery li a img {
margin: 20px 20px 21px 20px;
width: 28.50%;
float:left;
padding-bottom:50px;
}

编辑1：这是我得到的样本照片。

Answer 1

<figure> + <figcaption>就是为此设计的。

为了让它成为宝丽来，这就是我要做的事情：

figure {
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}
figure img {
  display: block;
}
figcaption {
  display: block;
  padding: 1rem 0 .5rem;
  color: #777;
}

<figure>
   <img src="http://placehold.it/350x250" />
   <figcaption>This would be a caption</figcaption>
 </figure>
 <figure>
   <img src="http://placehold.it/250x350" />
   <figcaption>This would be another caption</figcaption>
 </figure>

请注意，您目前正在浮动<img>代码。如果您希望上述功能正常运行，则需要 从当前的CSS中删除以下 ：

div.gallery li a img {
  margin: 20px 20px 21px 20px;
  width: 28.50%;
  float:left;
  padding-bottom:50px;
}

您可以改为漂浮<figure>。

Answer 2

有一个html标签可以做你想要的：

＆＃13;

#include <stdio.h>
#include <stdlib.h>
#include <omp.h>


int main(int argc, char* argv[])
    {
    const int n =100; float a = 3.0f; float b = 2.0f;
    float *x = (float *) malloc(n * sizeof(float));
    float *y = (float *) malloc(n * sizeof(float));

    int i;
    int j;
    int k;

    double start;
    double end;
    start = omp_get_wtime();


    for (k=0; k<n; k++){
        x[k] = 2.0f;
        y[k] = 3.0f;
    }


    #pragma omp target data map(to:x[0:n]) map(tofrom:y[0:n]) map(to:i) map(to:j)
    {

        #pragma omp target teams 
        #pragma omp distribute
        for(i = 0; i < n; i++) {

            #pragma omp parallel for
            for (j = 0; j < n; j++){
                y[j] = a*x[j] + y[j];
        }
    }


}


end = omp_get_wtime();

printf("Work took %f seconds.\n", end - start);

free(x); free(y);   

return 0;
}

＆＃13;

Answer 3

将您的文本放在div中，将其置于绝对位置并为其指定z或更高的索引。

<div id="txt">This is a title</div>

<style>
    position: absolute;
    z-index: 99;
</style>

如何在图像底部放置文字（宝丽来图像）

3 个答案: