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

Posted 2023-03-05

【中文标题】CSS 新手 - 在子容器中对齐文本和照片

【英文标题】：Newbie to CSS - aligning text and a photo within a sub-container

【发布时间】：2012-09-01 10:59:28

【问题描述】：

我一直在寻找这个问题的答案，并尝试了多种修复方法，但均无济于事。我在重建网站时自学 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"   />
  </div>
  <div class="wrapcopy">
    <img src="images/About/image.png"   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>

【问题讨论】：

有点不清楚你在问什么。也许你可以包括某种图片或图表。

我还不能上传图片......但想法是（假设我的图表成立！） - 现在所有这些都在一个正常工作的更大容器内......你可以查看主页面ispitfire.com/ispitfire-preview/Index.html:

图表不工作。它本质上类似于以下内容 - 在 Mashable.com 上，在主页上的所有故事下，左侧有一个缩略图，标题和副本在右侧......类似的想法，减去标题......只是一张照片在包装器的左侧，副本在其右侧。

【参考方案1】：

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

#wrapper img
float: left;

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

【讨论】：

因为文本在同一个 div 中，它不支持任何类型的填充或边距，这是有道理的......所以我假设解决方案是给它的文本自己的id/class？

【参考方案2】：

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

<div id="wrapper_head" ....

而不是

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

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

【讨论】：

谢谢！这适用于一部分，但不适用于另一部分...一旦我从 当然，您也必须在样式表中进行更改。但我认为你做到了这一点。我不知道你的问题是什么，抱歉。

【参考方案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"   /></h1>

<p><img src="images/About/image.png"   /> 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>

【讨论】：

为什么不呢？这是允许的。虽然以这种方式使用它应该有一个 alt 属性。

有趣的是，我以前从未见过这样做过。我通常更喜欢 CSS 图像替换，但我想您可以在图像损坏的情况下使用 alt 标签。 （也相关：***.com/questions/1605454/…）

这显然是一段示例代码，标记还可以。有可能他在图片上方有一个H1标签..

令人沮丧的是没有代表对其他答案发表评论，但 Boyye 错过了 OP 在他的示例中有 2 张图片的事实。使用 #wrapper img 会使它们都浮动，而不是仅与复制文本分组的一个。

Wex 指的是在 CSS 中使用图像替换技术（最常见的可以在这里找到：mezzoblue.com/tests/revised-image-replacement）。它们中的大多数都有缺点（有些使用额外的标记，有些不能用于透明图像，大多数不适用于关闭图像）。

【参考方案4】：

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

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

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

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

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