html - 使用CSS将跨度定位在图像下方

Question

我希望 byline 出现在图片的正下方。

我正在尝试使用与 relative 属性相关的 right、left 等属性，但跨度向左移动图片。

我的代码有什么错误？

<section id="manchanabele">
    <img id="club" alt="club" src="images/club.jpg">
    <p id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  nisi ut aliquip ex ea commodo consequat.
        <span id="byline">by: Lorem Ipsum</span>
    </p>    
</section>

section#manchanabele {
    background: #C8C8C8;
}

#club {
    float: right;
    width: 75px;
    height: 75px;
}

p#lorem {
    background: #A0A0A0;
}

span#byline {
    position: relative;
    float: right;
}

Answer 1

您以错误的方式构建了 DOM，您应该将要 float 的元素包装在一个容器中。我将为您提供代码，这将使您得到如下所示的结果

---

这里，在下面的代码中，我将解释与上图相关的内容，黑色边框的容器是.wrap，绿色边框的是段落，即p，红色的是你向右浮动的容器，它是.right_float，红色元素里面的嵌套元素是你的img和span 分别。

例如

<div class="wrap">
   <p>Hello</p>
   <div class="right_float">
      <img src="#" />
      <span>Hello</span>
   </div>
</div>

.wrap {
   overflow: hidden; /* Clears float */
}

.wrap p {
   float: left;
   width: /*Some fixed width*/
}

.wrap .right_float {
   float: right;
   width: /* Some fixed width */
}

.wrap .right_float span {
   display: block;
}

---

请注意，如果您不关心旧版本，尤其是 IE，我建议您使用自清除父类

.clear:after {
   clear: both;
   display: table;
   content: "";
}

现在，您可以在包含 float 元素的父元素上调用上述类，而不必使用 overflow: hidden;