CSS: позиция Div

Question

Я работаю с темой WordPress, она автоматически генерирует html-вывод комментариев.Вывод HTML выглядит так:

Author says:
August 30, 2011 at 6:43 pm  (Edit)
The comment text...
Reply.

Мне нужно изменить положение элементов.Например, я хотел бы отобразить автора, дату / редактирование и ответ в одну строку.как:

Author says:    August 30, 2011 at 6:43 pm  (Edit)  Reply
The comment text...

Как я уже говорил выше, я не могу изменить структуру HTML, поэтому мне нужно изменить положение элементов только с помощью CSS.Однако я не могу этого сделать.Я буду признателен за любую помощь.

Вот сгенерированный HTML:

<div class="comment-body" id="div-comment-33">

        <div class="comment-author vcard">
            <img width="48" height="48" class="avatar avatar-48 photo" src="http://i55.tinypic.com/21buau9.jpg" alt="">     

            <cite class="fn">
                <a class="url" rel="external nofollow" href="#">Author</a>
            </cite> 
            <span class="says">says:</span>     

        </div>

        <div class="comment-meta commentmetadata">
            <a href="#comment-33">August 30, 2011 at 6:43 pm</a>&nbsp;&nbsp;
            <a title="Edit comment" href="#" class="comment-edit-link">(Edit)</a>       
        </div>

        <p>The comment text...</p>

        <div class="reply">Reply</div>
</div>

jsFiddle link:

http://jsfiddle.net/GLwfW/1/

PS.Я знаю, что мы можем изменить вывод HTML, добавив пользовательскую функцию в WordPress, но это не вариант.

Answer 1

Вы можете начать с display:inline-block; на первых нескольких элементах:

.comment-body{
    border:1px solid green;
    position:relative;
}

.comment-author, .comment-meta{
    display:inline-block;
}

.reply{
    position:absolute;
    top:34px;
    left:360px;
}

Затем дать position:absolute; для .reply.Возможно, вам придется поиграть с этими числами.

Пример: http://jsfiddle.net/GLwfW/9/

---

РЕДАКТИРОВАТЬ

На основе@ Комментарий Диоде re

Вы можете попробовать абсолютное позиционирование - пока имя автора не станет длинным, что затем заставит «ответить» поверх текста, который обычно был слева от него.

Единственное, что нужно сделать, это detach ответ от DOM и заново вставить его.Итак

Новый CSS

.comment-body{
    border:1px solid green;
    position:relative;
}

.comment-author, .comment-meta, .reply{
    display:inline-block;
}

Некоторые JS

var a = $('div.reply').detach();

a.appendTo('.comment-meta');

Исправленный пример: http://jsfiddle.net/GLwfW/10/

Answer 2

Вы можете изменить положение элементов, добавив «float: left», но в этом случае это не сработает, поскольку вам нужно, чтобы ответ отображался перед «Текст комментария».CSS не может изменить порядок элементов.

Когда «нарисовано в углу», как это, вы всегда можете переписать HTML на клиенте, используя jQuery.Брутальный, но иногда это единственный вариант.

Answer 3

Это будет очень сложно, есть способ, но он очень ограничен. Если вы можете гарантировать высоту пикселя фактического тела комментария (что, как я полагаю, вы не можете), то вы можете встроить элементы, вынуть элемент reply из потока (расположив его внизу контейнера) и установить прокладка на контейнере, чтобы заставить его опустить. См. эту скрипку для примера. Достигает желаемого эффекта, но не выдерживает многострочных комментариев.

Answer 4

Добавьте это к вашему CSS

.comment-author, .comment-meta  { display:inline; } 

Вот это jsfiddle

Редактировать: Видно, я пропустил кнопку ответа. Его можно разместить абсолютно в правом верхнем углу. С:

.comment-body{ position:relative; }
.reply { right:0; top:0; position:absolute; }

Но это может перекрывать текст, если текст становится длинным. В противном случае вам придется изменить HTML.