如何使文字正好在图像下方

时间：2014-12-10 13:20:54

标签： html css image grid

我创建了一个类似于

的html

＆＃13;
＆＃13; 
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
＆＃13;
＆＃13;
＆＃13;

我希望所有图像都出现在网格中，并且还要将文本放在相应图像下方。如果文本的长度超过图像，则文本应在第2行继续。您可以在下图中查看我想要的内容。然而，在图像中，文本后面有一个单独的背景，这对我来说并不重要。

此链接提供了图片：http://imageart.webs.com/html%20output.png

3 个答案:

答案 0 :(得分：1)

做一些类似 Vucko 的建议，因为图像和p都包含在一个

中 
a { 
 display:inline-block; /* Aligns them side by side */
 width: 100px; /* You need a fixed width */
 margin: 0 10px 10px 0; /* Just for spaces */
}

See working example here

注意我们针对a，因为在这种情况下，它分别是图像的父级和p。

答案 1 :(得分：0)

尝试这个简单的表格对齐.. 

 <table width="100%">
    <tr><td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    </table>

答案 2 :(得分：0)

<figure>
<img scr='#'>
<figcaption>I am under the image</figcaption>
</figure>

HTML 5解决方案http://www.w3schools.com/tags/tag_figcaption.asp

另见这篇文章How to align caption underneath image

相关问题
最新问题