Question

我想为评论制作CSS布局。

所以基本上评论块由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 |用户信息。

应用margin-left：width（.user-photo）+ some 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%;
}

CSS评论布局

3 个答案: