如何使底部的图像在 html 或 css 中转到顶部图像的右侧？答案

【问题标题】：How do I make the image on the bottom go to the right side of the image on top in html or css?如何使底部的图像在 html 或 css 中转到顶部图像的右侧？
【发布时间】：2018-04-15 16:25:36
【问题描述】：

我的测试网站是https://lilio.000webhostapp.com/

我正在尝试使底部上的图像转到顶部图像的右侧侧。我试过 margin 和 padding

您可以在下面看到我的代码。这是我走了多远的中间结果。：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>The Hot List</title>
        <style>
        #THL
        {
         font-family: Tahoma;
         font-weight: bold;
         color: #ffffff;   
        }

        #HB
        {
        width: 596px;
        background-color: #19AF52;
        padding: 0.1px;
        margin: -10px;
        margin-bottom: 26px;
        }

        #PGImg
        {
            margin-top: 8px;
        }

        #PGTitle
        {
            margin-top: 0px;
            padding: 0px;
            font-family: Tahoma;
            font-size: 11.50px;
            font-weight: bold;
        }

        #PGCreator
        {
            margin-top: -13px;
            padding: 0px;
            font-family: Tahoma;
            font-size: 8.75px;
            color: #19AF52;
        }

        #PGInfo
        {
            margin-top: -9px;
            padding: 0px;
            font-family: Tahoma;
            font-size: 8.50px;
            color: #c9c9c9;
        }

        </style>
    </head>
    <body>


    <!--Heading Bar-->
    <div id="HB">
        <h1 align="center" id="THL">The Hot List</h1>
    </div>

    <!--Programs-->
    <!--PG1-->
    <p></p>
    <img class="PG1" id="PGImg" 
         href="https://www.something.com/123" 
         src="https://www.something.com/123.png" alt="Program 1 Image" 
         height="130" width="130" 
         style="border-color:#c9c9c9;" border="1px">

    <!--PG1 Title-->
    <p id="PGTitle">Hard Working (UPDA...</p>
    <p id="PGCreator">CodingChamp01</p>
    <p id="PGInfo">109 Votes · 49 Spin-Offs</p>

    <!--PG2-->
    <p></p>
    <img class="PG2" id="PGImg"
         href="https://www.something.com/123" 
         src="https://www.something.com/123.png" alt="Program 1 Image" 
         height="130" width="130" 
         style="border-color:#c9c9c9;" border="1px">

    <!--PG2 Title-->
    <p id="PGTitle">Hard Working (UPDA...</p>
    <p id="PGCreator">CodingChamp01</p>
    <p id="PGInfo">109 Votes · 49 Spin-Offs</p>

    </body>
</html>

希望你能帮我解决这个问题，我会很高兴的。

【问题讨论】：

标签： html css image margin padding

【解决方案1】：

您正在使用重复的 ID，这是无效的，并且是 invalid markup。您已经为这两个图像使用了类，因此只需坚持使用这些类。在我的示例中，我已经删除了您的图像的 ID，以及相关的 CSS 选择器。我还删除了两个图像之间的空段落，因为您不应该使用空段落来控制分隔。

至于实际问题，您处理的不仅仅是两张图片；你也有很多附带的文字。我建议创建<div> 元素，这些元素围绕着整个PG 'section'。我已分别为这些新元素指定了 PG1_container 和 PG2_container 类。

然后只需float这些容器到left：

.PG1_container, .PG2_container {
  float: left;
}

这可以在下面的例子中看到：

#THL {
  font-family: Tahoma;
  font-weight: bold;
  color: #ffffff;
}

#HB {
  width: 596px;
  background-color: #19AF52;
  padding: 0.1px;
  margin: -10px;
  margin-bottom: 26px;
}

#PGTitle {
  margin-top: 0px;
  padding: 0px;
  font-family: Tahoma;
  font-size: 11.50px;
  font-weight: bold;
}

#PGCreator {
  margin-top: -13px;
  padding: 0px;
  font-family: Tahoma;
  font-size: 8.75px;
  color: #19AF52;
}

#PGInfo {
  margin-top: -9px;
  padding: 0px;
  font-family: Tahoma;
  font-size: 8.50px;
  color: #c9c9c9;
}

.PG1_container, .PG2_container {
  float: left;
}

<body>
  <!--Heading Bar-->
  <div id="HB">
    <h1 align="center" id="THL">The Hot List</h1>
  </div>
  <!--Programs-->
 
   <!--PG1-->
  <div class="PG1_container">
    <img class="PG1" href="https://www.khanacademy.org/computer-
programming/hard-working-updated-again/5565885026336768" src="https://www.khanacademy.org/computer-programming/hard-working-updated-
again/5565885026336768/5685265389584384.png" alt="Program 1 Image" height="130" width="130" style="border-color:#c9c9c9;" border="1px">
    <!--PG1 Title-->
    <p id="PGTitle">Hard Working (UPDA...</p>
    <p id="PGCreator">CodingChamp01</p>
    <p id="PGInfo">109 Votes · 49 Spin-Offs</p>
  </div>
  
  <!--PG2-->
  <div class="PG2_container">
    <img class="PG2" href="https://www.khanacademy.org/computer-
programming/hard-working-updated-again/5565885026336768" src="https://www.khanacademy.org/computer-programming/hard-working-updated-
again/5565885026336768/5685265389584384.png" alt="Program 1 Image" height="130" width="130" style="border-color:#c9c9c9;" border="1px">
    <!--PG2 Title-->
    <p id="PGTitle">Hard Working (UPDA...</p>
    <p id="PGCreator">CodingChamp01</p>
    <p id="PGInfo">109 Votes · 49 Spin-Offs</p>
  </div>
  
</body>

希望这会有所帮助！ :)

【讨论】：

太棒了；乐意效劳！一旦您确认这可以解决您的问题，请不要忘记点击投票按钮下方的灰色勾号mark it as accepted - 这会将其从“未回答的问题”队列中删除，并为这两个问题授予声誉提问者和问题回答者。在提出任何问题后 15 分钟，您就可以做到这一点。当然，这么说，您没有义务将我（或其他任何人）的答案标记为正确，尽管将问题标记为已解决有助于保持事情顺利进行:)