CSS комментарии

0

Я хочу создать макет CSS для комментариев.

Таким образом, блок комментариев состоит из трех частей:

  1. Фотография пользователя слева
  2. Заголовок комментария (состоящий из имени пользователя, плавающего слева, и данные комментариев перемещаются вправо)
  3. Тело комментария (плавающее фото пользователя)

http://dabblet.com/gist/10660127 это то, что у меня есть до сих пор. Проблема в том, что я не могу сделать правильный заголовок комментария. Очевидно, что я хочу правильно его выровнять, например, если я поместил много brs после.comment-title (но не лучшее решение, здесь я покажу желаемый результат: http://dabblet.com/gist/10660333).

Любое хорошее решение для этой разметки?

Теги:

3 ответа

1
Лучший ответ

Вы должны добавить clear: both (или, может быть, clear: right, в зависимости от того, как она ведет себя с изображением аватара), в ваш класс body.

Вы также можете дать ему немного padding-top.

  • 0
    Это почти сработало. Посмотрите, что у меня есть: oi58.tinypic.com/zn1uuo.jpg . Проблема в том, что текст комментария также плавает заголовок комментария или его вид. Я пытался добавить поля, но он не работал должным образом :(
0

Отдельно оставляйте содержимое в правом содержимом явно: user-photo | пользователь-инфо.

Применить margin-left: width (.user-photo) + некоторые px

Сделать.title display: table

См. Пример в 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%;
}
  • 0
    Это замечательно, за исключением того, что я хотел, чтобы текст комментария действительно показывал картинку, например, oi62.tinypic.com/mucqkl.jpg . Я уже пытался разбить комментарий на две части, используя margin-left, но в этом случае текст на самом деле не будет отображать изображение
0

Я считаю, что вы просто хотите поплыть user-photo? Вот то, что я придумал очень быстро: http://dabblet.com/gist/10661017

  • 0
    У меня есть поплавок: слева на .user-фото. Я хочу, чтобы данные были смещены вправо, и когда я делаю это, основной текст идет между заголовком комментария и данными
  • 0
    Вместо того, чтобы плавать вправо, вы можете использовать поле слева, как это: dabblet.com/gist/10661626
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню