将<aside>放在<p> </p> </aside>旁边

时间:2015-03-07 15:44:03

标签: html css

我需要在文章的段落旁边放置一些座右铭。

HTML代码如:

3 个答案:

答案 0 :(得分:0)

我查看了您的图片,看起来这是您元素顺序的问题。您应该将标记放在块上方,使其保持在正在运行的段落之上。

如果您想强制使用顶部位置,可以使用

position:absolute; 
right:0;
margin: auto;

您可以使用顶部的负边距或正边距来向上或向下推动元素,使其保持相对于DOM中的位置。这将是为了避免固定的像素定位。

答案 1 :(得分:0)

一个简单的解决方案就是将aside移到顶部,就像img旁边一样:

<section>
  <header>..</header>
  <img ..>
  <aside>...</aside>
  <article>
    <p> ..</p>
    <p> ..</p>
    <p> ..</p>
  </article> 
</section>

演示http://jsfiddle.net/wa0Lcad3/

如果您需要aside出现在段落的中间,则应将其移入其中。

答案 2 :(得分:0)

<section>
<header>..</header>
<img ..>
<aside>...</aside>
<p> ..</p>
<p> ..</p>
<p> ..</p>
</section>

Css for this

section
{
   white-space: normal;
   display: block;
   width: 100%;
}

img
{
  float: left;
  padding-right: 10px;
  display: inline-block;
  line-height: 24px;
 }

 aside
 {
   float: right;
   padding-left: 10px;
 }