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/

定位CSS callbox以正确对齐

1 个答案: