CSS評論版式

Question

我想爲評論製作CSS佈局。

所以基本上註釋塊由3個部分組成：

1. 左側
2. 評論頭用戶的照片（由用戶名的向左浮動和註釋數據右浮動）
3. 評論體（浮用戶照片）

http://dabblet.com/gist/10660127這是我到目前爲止。 我無法做出正確的評論標題的問題。顯然我想正確地對齊它，就好像我在.comment-title之後放了很多brs（但不是最好的解決方案，這裏我展示了期望的結果：http://dabblet.com/gist/10660333）。

該標記的任何好的解決方案？

Answer 1

您需要將clear: both（或可能是clear: right，取決於它如何與化身圖像行爲）添加到您的body類。

你也可以給它一些padding-top。

Answer 2

我相信你只是想看看user-photo還剩嗎？下面是我真正想到的：http://dabblet.com/gist/10661017

Answer 3

顯式地從正確的內容中分離左側內容：user-photo |用戶信息。

申請保證金左：寬度（。用戶-照片）+一些PX

讓.title僞display: table

See example in Fiddle

HTML：

<div class="user-photo"></div> 
<div class="user-info"> 
    <div class="title"> 
     <h3 class="pull-left">User name</h3> 
     <h3 class="pull-right">11.02.2014</h3> 
    </div> 
    <div class="body"> 
    Aenean vel ornare sapien. Suspendisse cursus pulvinar mattis. Donec magna odio, feugiat sed blandit vitae, fermentum eget ante. In iaculis nulla pretium malesuada porttitor. Ut adipiscing purus at pulvinar ultricies. Vestibulum lacinia erat felis, vitae faucibus justo dictum quis. Proin at erat ut turpis mollis aliquet. Aenean ornare nunc non elit sodales bibendum. Donec ac blandit turpis. Nunc faucibus in sapien in vehicula. Sed quam arcu, bibendum in imperdiet consequat, suscipit quis metus. In non est porttitor, adipiscing justo vitae, tempus nisi. 
    </div> 
</div> 

DIFF CSS：

.comment .user-info { 
    margin-left: 120px; 
} 

.comment .title { 
    display: table; 
    width: 100%; 
}