4

我一直在寻找这个问题的答案，并尝试了多种修复方法，但均无济于事。我在重建网站时自学 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>
4

4 回答 4

4

你在 CSS 中写了“photo”而不是“img”，像这样编辑它，它会工作的！

#wrapper img{
float: left;
}

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

于 2012-09-07T14:50:04.930 回答
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>
于 2012-09-07T14:59:30.713 回答
1

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

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

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

在你的情况下，你想在#wrapper分割内选择图像，所以选择它：

 #wrapper img 
  {
   /* Code Here... */
  }
于 2012-09-07T14:59:06.543 回答
0

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

<div id="wrapper_head" ....

代替 

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

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

于 2012-09-07T15:00:50.153 回答