Html 似乎找不到正确的位置_Html_Css

Html 似乎找不到正确的位置

html css

Html 似乎找不到正确的位置,html,css,Html,Css,所以，我只想对混乱的代码说声抱歉，我已经尽力做到了这一点。基本上，我希望有3个图像并排，我会在稍后使其可点击，并在它们后面的灰色背景。然后我希望能够在图像下面包含文本。有什么帮助吗 HTML 高级商店也请包括我做错了什么！我很难理解定位，尤其是如何添加整洁的设置。如果有人能和我用skype，我有一些问题P skype-ikorey1 谢谢大家的帮助和阅读。我真的很感谢所有的反馈有一种特殊的方法可以制作这种带有标题的排列图像。 <html lang="en"> <head

所以，我只想对混乱的代码说声抱歉，我已经尽力做到了这一点。基本上，我希望有3个图像并排，我会在稍后使其可点击，并在它们后面的灰色背景。然后我希望能够在图像下面包含文本。有什么帮助吗

HTML

高级商店也请包括我做错了什么！我很难理解定位，尤其是如何添加整洁的设置。如果有人能和我用skype，我有一些问题P skype-ikorey1

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

有一种特殊的方法可以制作这种带有标题的排列图像。

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

这将是我做你需要的事情的方式：

HTML

这个怎么样

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

有关职位详情，请参阅

这将对我们有很大帮助。

请使用a让我们帮助您better@vishnu请不要误解这一点，但我强烈建议您查看一些开发HTML/CSS的入门课程——如果您了解所做工作的基本原理和最佳实践，这将使您的生活更加轻松。我在Codeacademy上的课程有很多很棒的课程，甚至是付费课程，我的意思是我需要一个关于定位的坚实视频。如果你能给我链接一个，那就太棒了。使用作为的子对象，然后使用子对象，而不是直接在下面。去除在里面

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

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

#container{
   background:#ccc;
}

#container figure{
   float:left
}

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

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