如何正確對齊此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文檔，可以使用media類。

<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

您可能需要考慮將一些css屬性賦予p標簽。

http：// jsfiddle.net / hXaRG / 2 /`“>小提琴

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示例

（請注意，.row上的背景色僅用於可視化目的）