我的测试网站是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>
我希望你能帮助我，我会很高兴。
最佳答案
您正在使用重复的 ID，这是行不通的，并且是 invalid markup .您已经为这两个图像使用了类，因此只需坚持使用它们即可。在我的示例中，我已经删除了您的图像的 ID，以及关联的 CSS 选择器。我还删除了两个图像之间的空段落，因为您不应该使用空段落来控制分隔。
至于实际问题，您处理的不仅仅是两张图片；你也有很多附带的文字。我建议创建 <div>围绕每个整体的元素 PG '部分'。我给这些新元素类 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>希望对您有所帮助! :)
关于html - 如何使底部的图像在html或css中转到顶部图像的右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47087280/