Question

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

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

我的代码中有什么错误？

<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

您可以通过将元素包装在容器（如DIV）中来保持对行与图像对齐。

HTML：

<section id="manchanabele">
    <div id="align">
         <img id="club" alt="club" src="images/club.jpg">
         <span id="byline">by: Lorem Ipsum</span>
    </div>
    <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.
    </p>

</section>

CSS：

section#manchanabele {
    background: #C8C8C8;
}

#align {
    float:right;
    width:75px;
}

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

p#lorem {
    background: #A0A0A0;
}

N.B。如果您需要对类似内容多次使用此布局，则可能需要考虑使用类而不是ID。

Answer 2

您正在以错误的方式构造DOM，您应该将要浮动的元素包装在单个容器中。我将为您提供代码，以便您获得如下所示的内容

enter image description here

这里，在下面的代码中，我将向您解释与上图相关的内容，黑色边框容器为.wrap，绿色边框的是段落，即p， red on是你向右浮动的容器.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: "";
}

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

Answer 3

使用此标记：

<article>
    <div class="clearfix">
        <img src="http://lorempixel.com/70/70" alt="a random image" class="thumb" >
        <p>The quick brown fox jumps over all the messy markup and writes a new one.</p>
    </div>
    <footer>By The Fox</footer>
</article>

小提琴：http://jsfiddle.net/C5GkH/1/

或者如果您需要图像，并且副行长度始终低于另一个，请在右侧保留空白侧边栏，遵循@Mr的建议。外来

Answer 4

尽量清除：两者;在图像之后。

喜欢这样

<section id="manchanabele">
        <img id="club" alt="club" src="images/club.jpg">
        <div style="clear:both;></div>

        <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>

还要避免浮动内联元素。如果你用div包装那个图像然后浮动div就更好了。

使用css在图像下方定位跨度

4 个答案: