如何正确对齐此CSS？

Question

基本上我正在尝试将填充添加到配置文件图像并将其对齐，如下所示在我的引导页面中。

以下是目前的情况：

以下是我希望它的外观：

（请注意，用户名位于个人资料图片的顶部，评论文字位于下方，但与个人资料图片对齐）

这是HTML :(我是Bootstrap的新手）

    <div class="row">
        <div class="col-md-12">
            <img src="~/Images/avatar.png" class="profile-picture" />
            <label>Username - 1 month ago</label>
            <p>
                This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
            </p>
        </div>
    </div>

这是我的CSS，它为配置文件图像添加了一些填充：

.profile-picture
{
    padding-left: 10px;
    padding-right: 10px;
}

Answer 1

基于Bootstrap3文档，使用媒体类应该有效。

<div class="row">
    <div class="col-md-12 media">
        <img src="~/Images/avatar.png" class="media-object profile-picture" />

        <div class="media-body>
            <label class="media-heading">Username - 1 month ago</label>
            This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
        </div>
    </div>
</div>

有关此内容的更多文档：http://getbootstrap.com/components/#media

Answer 2

您可能需要考虑为p标记提供一些css属性。

的http：// jsfiddle.net / hXaRG / 2 /`“＆GT;小提琴

Answer 3

试试这个：

.profile-picture{float:left;margin-right:5px;}
.row p {margin-top:0;margin-left:52px;}
.row{width:500px;background:gray;}

这是最终结果：

https://docs.google.com/file/d/0B3q2DOPnNwNhM29SYXhEMXhlc3c/edit?usp=sharing

Answer 4

您必须浮动图像和内容才能获得所需的结果。你必须像这样修改一下html代码：

<div class="row">
            <div class="col-md-12">
                <img src="~/Images/avatar.png" class="profile-picture" />
                <div class="comment">
                    <label>Username - 1 month ago</label>
                    <p>
                    This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
                    </p>
                </div>
            </div>
        </div>

和css

.profile-picture, .comment{float:left;}
.comment label {display: block;}

我没有把你想要的保证金/填充。

Answer 5

试试这个CSS：

.row {
    position:relative;
    background: #999;
}
img {
    position:absolute;
    left:0;
    top:0;
}
.col-md-12 {
    padding-left:80px;  
}

<强> jsFiddle example

（注意.row上的背景颜色仅用于可视化目的）