Question

我有两个图像，我将它放在单独的div中，我想分别将文本放在每个图像下面。但是，对于我尝试过的一切，它都无法正常工作。

这是我的代码，以便您可以让我知道我做错了什么。

HTML

＆＃13;

<div class="eldersaac">
  <div class="container">
    <div class="img"> <img src="Elder.jpg" id="elder" />
      <h3>Elder Priest Esaias Ben YAHUDAH Y'ISRAEL</h3>
    </div>
    <div class="img"> <img src="Isaac.jpg" id="saac" />
      <h3>Isaac Ben YAHUAH Y'ISRAEL</h3>
    </div>
  </div>
</div>

＆＃13;

Answer 1

我已经使用您的HTML代码编写了一个示例。

＆＃13;

*{margin:0px; padding:0px;}
.img{ float:left; width:50%; text-align:center;}
.img img{ width:100%;}
.img h3{ display:block;}

＆＃13;

<div class="eldersaac">
  <div class="container">
    <div class="img"> <img src="https://dummyimage.com/400/ff0/000a96&text=Dummy+Image" id="elder" />
      <h3>Elder Priest Esaias Ben YAHUDAH Y'ISRAEL</h3>
    </div>
    <div class="img"> <img src="https://dummyimage.com/400/0f0/000a96&text=Dummy+Image" id="saac" />
      <h3>Isaac Ben YAHUAH Y'ISRAEL</h3>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我认为这对你有帮助：

.img{
width:45%;
float:left;
margin-left:2%;
position:relative;
}
img{max-width:100%;}

.img h3{font-size:12px; position:absolute;width:100%; bottom:0px; padding:5px 0px; background:#000; color:#fff; margin:0px}

<div class="eldersaac">
<div class="container">
<div class="img"> 
<img src="http://i67.tinypic.com/27yo6s8.jpg" id="elder" />
<h3>Elder Priest Esaias Ben YAHUDAH </h3>
</div> 
<div class="img"> 
<img src="http://i67.tinypic.com/27yo6s8.jpg" id="elder" />
<h3>Ben YAHUAH Y'ISRAE</h3>
</div>
</div>
</div>

将div和图像并排放置在每个图像下方的文本中

2 个答案: