Я хочу создать макет CSS для комментариев.
Таким образом, блок комментариев состоит из трех частей:
http://dabblet.com/gist/10660127 это то, что у меня есть до сих пор. Проблема в том, что я не могу сделать правильный заголовок комментария. Очевидно, что я хочу правильно его выровнять, например, если я поместил много brs после.comment-title (но не лучшее решение, здесь я покажу желаемый результат: http://dabblet.com/gist/10660333).
Любое хорошее решение для этой разметки?
Вы должны добавить clear: both
(или, может быть, clear: right
, в зависимости от того, как она ведет себя с изображением аватара), в ваш класс body
.
Вы также можете дать ему немного padding-top
.
Отдельно оставляйте содержимое в правом содержимом явно: user-photo | пользователь-инфо.
Применить margin-left: width (.user-photo) + некоторые px
Сделать.title display: table
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%;
}
Я считаю, что вы просто хотите поплыть user-photo
? Вот то, что я придумал очень быстро: http://dabblet.com/gist/10661017