将右侧 css 中的两个图像用单独的线对齐

Question

我想将这两张图片右对齐，但我希望它们在不同的行上。现在我能想到的唯一方法是对其中一张图像留出很大的余量，但我想知道是否有更好的方法。

我希望段落出现在第一张图片的右侧。滚动时段落的背景也会发生变化，但我想将颜色变化限制在文本周围。

在此代码中使用您想要的任何图像

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
    <title> Stack Overflow Question </title>
    <link rel="stylesheet" type="text/css" href="./css/q7.css"></link>
</head>
<body>
    <h1> Holla lolla lolla la </h1>
    <figure id=real>
        <img src="images/RealDog.jpg" </img>
        <figcaption>Figure 1. Real Dog</figcaption>
    </figure>
    <p id="Gar"> Gar Gar Gar </p>
    <p id="lol"> lol lol lol </p>
    <figure id=fake>
        <img src="images/FakeDog.jpg"></img>
        <figcaption>Figure 2. Fake Dog</figcaption>
    </figure>
</body>
</html>

Css 文件:

body {
    font-family: sans-serif;
    font-weight: normal;
    background-color: #EDEDED;
}
h1 {
    color: blue;
    font-weight: normal;
}
img {
    height: 100px;
    /*display: block;*/
}
p:hover {
    background-color:white;
}
#Gar {
    float: right;
    color: blue;
    margin-right: 100px;
}
#lol {
    float: right;
    color: blue;
    margin-right: 100px;
}
figure {
    float: right;
    margin-left: 1000px;
}

Answer 1

首先，了解 html 和 css works.You 应该更具体地与您的类和改进您的结构的方式非常重要 html code.For css 使用 margin:1000px 是错误的。这是错误的！我设置了 max-width 但你可以更改 it.I 试图更正你的代码我可以...但是有很多更好的方法可以解决您的问题

html代码：

<div class = "container">
  <h1> Holla lolla lolla la </h1>
  <div class="right-part">
   <figure id=real>
    <img src="images/RealDog.jpg" </img>
    <figcaption>Figure 1. Real Dog</figcaption>
   </figure>
 <div class="two-p">
   <p id="Gar"> Gar Gar Gar </p>
   <p id="lol"> lol lol lol </p>
 </div>
  <figure id=fake>
    <img src="images/FakeDog.jpg"></img>
    <figcaption>Figure 2. Fake Dog</figcaption>
  </figure>
</div>

css代码

body {
  font-family: sans-serif;
  font-weight: normal;
  background-color: #EDEDED;
}
.container{
   position:relative;
   max-width:900px;
   margin:0 auto;
}
h1 {
  color: blue;
  font-weight: normal;
  display: inline-block;
  vertical-align: top;
}
.right-part {
   display: inline-block;
}
p:hover {
  background-color:white;
}
#Gar {
  color: blue;
}
#lol {
 color: blue;
}
.two-p {
  display: inline-block;
  vertical-align: top;
}
figure#real {
  display: inline-block;
}

将右侧 css 中的两个图像用单独的线对齐

Aligning two images in css on the right with separate lines

html

css

margin

alignment