Question

我的页面是带有几张图片的文字段落。

我能够很好地放入图像，但确保一个图像与段落的右侧对齐，并且在页面的下方另一个与段落左侧对齐的图像超出了我的范围。

似乎页面上的所有图片都喜欢使用相同的代码。

我考虑用类来定义数字，但这不起作用。

我现在已经使用id定义了它们，但是现在已经无法在图像下对齐。

任何帮助，以了解我做错了什么，或任何更简单的方式得到我想要的。

我需要一个图像在段落的右侧对齐，在其下方有一个figcaption，页面上的其他图像与页面左边的一个figcaption对齐。

＆＃13;

figure img#selfie {
  float: right;
  width: 50%;
  text-align: left;
  font-size: smaller;
  padding-right: 0px;
  padding-left: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
}

img.scaled {
  width: 100%;
}

figure img#yuri {
  float: left;
  width: 30%;
  text-align: left;
  font-size: smaller;
  padding-right: 20px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

＆＃13;

<figure>

  <p>
    <br>
    <a href="https://www.nasa.gov/sites/default/files/thumbnails/image/pia19142_malhi-mojave.jpg">
      <img class="scaled" id="selfie" src="https://15809-presscdn-0-93-pagely.netdna-ssl.com/wp-content/uploads/2016/02/MTIyODA4OTg4OTIzNjI2MDg2.jpg" alt="Opportunity Rover takes a selfie on Mars">
    </a>
    <figcaption>
      The Opportunity rover takes the best selfies in the (known) universe.
    </figcaption>
</figure>



<figure>
  <p>
    <a href="https://www.nasa.gov/sites/default/files/thumbnails/image/pia19142_malhi-mojave.jpg">
      <img class="scaled" id="yuri" src="http://pixiebooks.ie/wp-content/uploads/2016/07/YuriG.jpg" alt="Yuri Gagarin">
    </a>
    <figcaption>
      Yuri Gagarin, the first man to orbit the Earth.
    </figcaption>
</figure>

＆＃13;

Answer 1

你必须浮动整个容器，即figure

从图片中移除浮动并添加两个新类right和left，float: right和float: left将该类提供给<figure>，现在这个应该工作：

＆＃13;

figure.right {
  float: right;
  width: 50%;
  text-align: left;
  font-size: smaller;
  padding: 0;
}

img.scaled {
  width: 100%;
}

figure.left {
  float: left;
  width: 30%;
  text-align: left;
  font-size: smaller;
  padding: 0;
}

＆＃13;

<figure class="right">

  <p>
    <br>
    <a href="https://www.nasa.gov/sites/default/files/thumbnails/image/pia19142_malhi-mojave.jpg">
      <img class="scaled" id="selfie" src="https://15809-presscdn-0-93-pagely.netdna-ssl.com/wp-content/uploads/2016/02/MTIyODA4OTg4OTIzNjI2MDg2.jpg" alt="Opportunity Rover takes a selfie on Mars">
    </a>
    <figcaption>
      The Opportunity rover takes the best selfies in the (known) universe.
    </figcaption>
</figure>



<figure class="left">
  <p>
    <a href="https://www.nasa.gov/sites/default/files/thumbnails/image/pia19142_malhi-mojave.jpg">
      <img class="scaled" id="yuri" src="http://pixiebooks.ie/wp-content/uploads/2016/07/YuriG.jpg" alt="Yuri Gagarin">
    </a>
    <figcaption>
      Yuri Gagarin, the first man to orbit the Earth.
    </figcaption>
</figure>

＆＃13;

用figcaption左右文字图像

1 个答案: