2

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

我正在尝试使用与属性相关的right, left, etc 属性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;
}
4

4 回答 4

2

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

在此处输入图像描述

在这里，在下面的代码中，我将解释与上图相关的内容，黑色边框的容器是.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: "";
}

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

于 2013-09-16T11:31:17.830 回答
2

您可以通过将元素包装在 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;
}

注意 如果您需要多次使用此布局来处理类似内容，您可能需要考虑使用类而不是 ID。

于 2013-09-16T11:32:32.260 回答
1

使用此标记：

<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. 的建议。外星人

于 2013-09-16T11:34:11.817 回答
0

尝试清除：两者；在图像之后。

像这样

<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 会更好。

于 2013-09-16T11:26:25.957 回答