Question

所以我只想对凌乱的代码说声抱歉，我已经用这个做了很多努力。基本上我希望有3张图像并排，我稍后会点击它们，背后是灰色背景。然后我希望能够在图像下面包含文字。有什么帮助吗？

HTML

高级商店

   <table id="table1" >
   <tr id="imgs">
    <div id="tablet">
   <table border="0";>
      <td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/></td>
   <td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/></td>
   <td><img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro->            </icons8-metro->style/128/Business-Shop-icon.png"/></td>
        </div>
   </tr>
   <td> 
         Contact a representative!
   </td>
   <td>
       Deliver to your house!
   </td>
   <td>
       Locate a store!
   </td>

    </table>

CSS

#backgroundH
{
  width: 100%;
  height: 50px;
  background-color: #dddddd;
  position: absolute;
}

#header
{
  top: -50px;
  color: black;   
  font-family: "Courier New";
  text-align: center;
}

body
{
  background-color: #cccccc;
}

#table1
{
  width: 500px;
  height: 200px;
  background-color: #d9d9d9;
  position: fixed;
  margin-left: -250px;
  margin-top: -100px;
  top:50%;
  left:50%;
}

td
{
  width: 10px;
  height: 450px;
  position: relative;
  margin-left: -5px;
  margin-top: -225px;
  top: 35%;
  left: 3%;
}

还请包括我做错了！我很难理解定位，具体如何添加整洁的设置。（如果有人可以和我一起skype我有一些问题..：P skype-ikorey1）

谢谢大家的帮助和阅读。我非常感谢所有的反馈。

Answer 1

<html lang="en">
  <head>
      <style type="text/css">
    .img-with-text { float: left; text-align: center}
    </style>
  </head>


  <body>    
    <div class="container">
    <div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt=""   width="200" height="230" style="border: 2px solid black;" />
    <p>Anup<br />9096969903<br /><a href="mailto:anup08@boun.cr">Email Carl Call</a>  </p>
    </div>
    <div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
    <p>Anup<br />9096969903<br /><a href="mailto:anup08@boun.cr">Email Sjon Gentry</a></p>
    </div>
    <div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
    <p>Anup<br />9096969903<br /><a href="mailto:anup08@boun.cr">Email John Mabery</a> </p>
    </div>    
    </div>

<!-- End of your code -->
    <p style="clear: both">Something more here </p>

Answer 2

有一种特殊的方式来制作这种类型的安排（带有标题的图像）。这将是我做你需要的方式：

<强> HTML

<div id="container">
    <figure>
       <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/>
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
    <figure>
      <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/>
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
    <figure>
      <img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro->            </icons8-metro->style/128/Business-Shop-icon.png"/>
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>

</div>

<强> CSS

#container{
   background:#ccc;
}

#container figure{
   float:left
}

Answer 3

这个怎么样..

    <table id="table1">
    <tr id="imgs">
        <td>
            <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" />
            <p class="content">
                Contact a representative!
            </p>
        </td>

        <td>
            <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" />
            <p class="content">
                Deliver to your house!
            </p>
        </td>

        <td>
            <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Shop-icon.png" />
            <p class="content">
                Locate a store!
            </p>
        </td>
    </tr>
</table>

和css

body {
        background-color: #cccccc;
    }

    #table1 {
        width: 500px;
        height: 200px;
        background-color: #d9d9d9;
        position: fixed;
        margin-left: -250px;
        margin-top: -100px;
        top: 50%;
        left: 50%;
    }

    tr {
        width: 10px;
        height: 450px;
        position: relative;
        margin-left: -5px;
        margin-top: -225px;
        top: 35%;
        left: 3%;
    }

    td.content {
        position: absolute;
    }

以及位置详细信息在w3schools

中有明确说明

这将有助于我们。

似乎无法获得正确的位置

高级商店

3 个答案: