如何将帖子文字置于头像旁边而不是在头像下方？

所以我试图创建一个具有化身的论坛，但现在的文本是在化身之下，而不是在他们旁边。我怎样才能解决这个问题？如何将帖子文字置于头像旁边而不是在头像下方？

这里是CSS：

.postbox{ 
    text-align: left; 
    margin: auto; 
    background-color: #dbfef8; 
    border: 1px solid #82FFCD; 
    width: 100%; 
    margin-top: 10px; 
} 

.postfooter{ 
    width: 100%; 
    border-top: 1px solid #82FFCD; 
} 

.postheader{ 
    width: 100%; 
    border-bottom: 1px solid #82FFCD; 
} 

.posttext{ 
    width: 70%; 
    text-align: left; 
    border: 1px solid #82FFCD; 
} 

.postavi{ 
    width: 20%; 
    text-align: left; 
    border: 1px solid #82FFCD; 
}

这里是HTML：

<div class="postbox"><div class="postheader"> 
          <b><span>CyanPrime!!~::##Admin##::~</span></b> 

         </div> 
         <div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div><div class="posttext">Let's test the Hacker Avatar.</div> 
         <div class="postfooter"> 
          [<a href="http://prime.programming-designs.com/test_forum/viewthread.php?thread=25">Reply</a>] 0 posts omitted. 
         </div> 
        </div>

来源

2010-04-09 William

你可以将你的div包装在一个容器div中，并将所有东西都留下。记得清理你的花车。

.clear { clear: both; } 

.posttext{ 
    float: left; 
    width: 70%; 
    text-align: left; 
    border: 1px solid #82FFCD; 
} 

.postavi{ 
    float: left; 
    width: 20%; 
    text-align: left; 
    border: 1px solid #82FFCD; 
} 


<div> 
    <div class="postavi"><img src="http://prime.programming-designs.com/test_forum/images/avatars/hacker.png" alt="hacker"/></div> 
    <div class="posttext">Let's test the Hacker Avatar.</div> 
    <br class="clear"/> 
</div>

来源

2010-04-09 18:41:22 digitaldreamer

这工作，非常感谢你。^_^ – William 2010-04-09 18:47:31

@William：标记为答案，然后！ @digitaldreamer：不要使用'
'，它对布局有影响......使用'

'或其他不影响剩余布局的其他内容。 – ANeves 2010-04-09 18:51:26

这应做到：

.postavi{ float: left}

来源

2010-04-09 18:35:44 graphicdivine

这就是我想太多，但浮动似乎真的打破了布局，如下所示：http://prime.programming-designs.com/test_forum/viewboard.php?board=0 – William 2010-04-09 18:40:33

你”可能没有正确地清理你的花车。 – digitaldreamer 2010-04-09 18:45:31

添加CSS “浮动：左;”到必须允许文本并排放置的元素。

来源

2010-04-09 18:37:03 jweyrich

浮动混乱布局方式太多。 – William 2010-04-09 18:41:01

不是真的，如果有人正确使用它。但是，IE可能仍然有问题。 – jweyrich 2010-04-09 18:43:55

如何将帖子文字置于头像旁边而不是在头像下方？

回答

相关问题