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 张图片，这会使它们都浮动。您可以通过为这些图像提供一个 ID/类来解决这个问题。

Answer 2

您的代码的问题是 id 标签中的空格。
尝试类似

<div id="wrapper_head" ....

而不是

<div id="wrapper head" ....

这应该可以解决您的问题！

Answer 3

首先，您没有正确引用您的类：“#wrapper photo”应该是“#wrapper .photo”。此外，id 中不能有空格（“#wrapper head”）。

有几种方法可以添加所需的间距。最直接的方法是直接向图像添加填充：

#wrapper .photo { float: left; padding-right: 10px }

我还想指出，您使用的标记非常糟糕。标题应该放在 h1-h6 标签中（这些标签中仍然允许使用图片！），文本段落应该放在 p 标签中。部分或文章标签可能是您的包装 div 的合适替代品。了解 CSS 还不够，您还需要了解相应的 HTML 标记。

一个更有效的方法是这样的：

section.foo {
    background-image:url("images/About/Copy-Block.png");
    background-repeat:no-repeat;
    width: 745px;
    height: 339px;
    margin: 0 auto;
    margin-top: 30px;
}
section.foo h1 {
    padding-top: 15px;
    padding-bottom: 2px;
    text-align: center;
}
section.foo p {
    padding-left: 90px;
    font-size: 13px;
    color: #FFF;
    font-style: italic;
}
section.foo p img {
    float: left;
    padding-right: 10px;
}

还有 HTML：

<section class="foo">
<h1><img src="images/About/About-Us-Subhead.png" width="748" height="116" /></h1>

<p><img src="images/About/image.png" width="257" height="194" /> 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.</p>
</section>

Answer 4

首先，切勿使用任何空格命名 ID。

所以把id="wrapper head"改成id=id="wrapper_head"

接下来，可以通过标签选择元素。
图片由<img 标签编码，因此您可以通过img { } 直接在CSS 中选择它。

在您的情况下，您想选择 #wrapper 分区内的图像，因此选择它：

 #wrapper img 
  {
   /* Code Here... */
  }