css - CSS 新手 - 在子容器内对齐文本和照片

Question

我一直在寻找这个问题的答案，并尝试了多种修复方法都无济于事。我在重新构建网站时自学 CSS，遇到了一个小问题。

我在父容器中有一个容器 - “子容器”(没有更好的术语)有自己的标题，左边是一张照片，右边是副本。副本应与照片顶部对齐，并且照片的右边缘与子容器中背景图像的右边缘之间的间距相等。我得到的是照片在正确的位置，副本靠在照片的右下角。

我相当肯定这个问题是缺乏知识和对导致什么的误解的混合体......因此非常感谢任何帮助。

这是我的 CSS:

#wrapper {
  background-image:url("images/About/Copy-Block.png");
  background-repeat:no-repeat;
  width: 745px;
  height: 339px;
  margin: 0 auto;
  margin-top: 30px;
}

#wrapper head {
  display:block;
  padding-top: 15px;
  padding-bottom: 2px;
}

#wrapper photo {
  float: left;
}

.wrapcopy {
  padding-left: 90px;
  font-size: 13px;
  color: #FFF;
}

这是我的 html:

<div id="wrapper">
  <div id="wrapper head" align="center">
    <img src="images/About/About-Us-Subhead.png" width="748" height="116" />
  </div>
  <div class="wrapcopy">
    <img src="images/About/image.png" width="257" height="194" class="wrapper photo"/>
    <i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</i>
  </div>
</div>

Answer 1

你在 CSS 中写的是“photo”而不是“img”，像这样编辑它就可以了!

#wrapper img{
float: left;
}

但是，您的示例中有 2 张图像，这将使它们都 float 。您可以通过为这些图像提供例如 ID/类来解决该问题。