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的工作方式非常重要。你应该对你的类更具体，并在html代码中改进你的结构。对于css，使用margin是错误的：1000px。这是错的！我设置了最大宽度，但你可以改变它。我尽可能地纠正你的代码...但是有更好的方法来解决你的问题

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中的两个图像对齐

1 个答案: