CSS：Div 的位置

Posted 2023-03-05

【中文标题】CSS：Div 的位置

【英文标题】：CSS: Div's position

【发布时间】：2011-12-05 11:45:57

【问题描述】：

我正在使用 wordpress 主题，它会自动生成 cmets 的 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   class="avatar avatar-48 photo" src="http://i55.tinypic.com/21buau9.jpg" >     

            <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 链接：

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

PS。我知道我们可以通过在 wordpress 中添加自定义函数来更改 HTML 输出，但这不是一个选项。

【问题讨论】：

您可以通过仪表板上的 编辑 菜单直接编辑 HTML。 **仪表板 > 外观 > 编辑。然后选择comments.php文件，找到显示评论&评论作者的html，将显示作者、日期/编辑和回复的html移到一行。

【参考方案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/

---

编辑

基于@Diodeus 的评论重新

你可以试试绝对定位——直到作者名字长， 然后将强制“回复”位于之前的文本之上 通常在它的左边。

要做的一件事是 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/

【讨论】：

棘手的部分是他希望将“回复”移到编辑旁边。

完全正确@JamesMontagne。我只是编辑来解决这个问题。看看吧。

您可以尝试绝对定位 -- 直到作者的名字变长，这将强制“回复”位于通常位于其左侧的文本之上。

由于元素的顺序，可能是唯一的解决方案，但如果作者的名字更长，这将不起作用。我想你可以根据这个或其他东西来决定最长可能的名字和位置，虽然有点乱。

真@Diodeus。我认为这里有两个选择。一、限制作者姓名的长度或从DOM中删除回复并重新插入到适当的位置以方便样式。

【参考方案2】：

将此添加到您的 css 中

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

这里是jsfiddle

编辑：看来我错过了回复按钮。它可以绝对放在右上角。与：

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

但如果文本过长，这可能会与文本重叠。否则，您将不得不更改 html。

【讨论】：

他也想要那里的回复链接。

【参考方案3】：

这将非常困难，有办法但非常有限。如果您可以保证实际评论正文的像素高度（我认为您不能），那么您可以内联元素，将 reply 元素从流中取出（将其定位在容器的底部）并设置容器上的填充以将其向下压。有关示例，请参阅this fiddle。它达到了预期的效果，但不能很好地支持多线 cmets。

【参考方案4】：

您可以通过添加“float:left”来更改项目的位置，但这在这种情况下不起作用，因为您需要回复出现在“评论文本”之前。 CSS 不能重新排列元素的顺序。

当像这样“画到一个角落”时，您总是可以使用 jQuery 在客户端上重新编写 HTML。残酷，但有时这是唯一的选择。