css - 定位 CSS 调用框以正确对齐

Question

我无法对齐以下项目（如下所示）：基本上，该用户的文本主体左侧出现了一个小的用户头像和一些统计信息，以及下面的任何其他元素。我已将我的整个页面设置为 Bootstrap <div class="container">，因此换句话说，用户头像可以与container类设置的页面的最左侧对齐，主要元素位于右侧。我无法排列任何“附加元素”，而且vertical-align:text-top在我的课程中使用它似乎不起作用..感谢您的帮助！

想要的输出...

 ----   -------------------------------
|user| |main text ...                  |
|ava-| |                               |
|tar | |                               |
 ----  |                               |
       |                               |
        -------------------------------
        -------------------------------
       |additional elements...         |
        -------------------------------

Answer 1

HTML

<div id="parentDiv">
    <img id="avatar" src="" />
    <div id="rightDiv">
        <div id="mainText">
        </div>
        <div id="elements">
        </div>
    </div>
</div>

CSS

#parentDiv
{
    overflow:hidden;
}
#avatar
{
    float:left;
    width:200px;
    height:300px;
}
#rightDiv
{
    float:left;
    margin-left:10px;
}

看看：http: //jsfiddle.net/AliBassam/pxY6c/