CSS：Div的位置

我正在使用wordpress主題，它會自動生成註釋的html輸出。 HTML輸出如下：CSS：Div的位置

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元素的位置。但我很難這樣做。我會appriciate任何幫助。

這裏是生成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鏈路：

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

PS。我知道我們可以通過在wordpress中添加自定義函數來更改HTML輸出，但這不是一個選項。

來源

2011-10-11 user966585

您可以通過儀表板上的** Edit **菜單直接編輯HTML。 **儀表板>外觀>編輯。然後選擇'comments.php'文件，找到顯示評論和評論作者的HTML，並將顯示作者的HTML，日期/編輯和回覆移到一行上。 – joshmax

您可以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的評論 - 直到作者的名字很長，然後強制「回覆」在的文本之上通常在它的左邊。

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

來源

2011-10-11 17:06:29

棘手的部分是，他希望「回覆」在編輯旁邊移動。 –

完全正確@JamesMontagne。我剛剛編輯來解決這個問題。看一看。 –

您可以嘗試絕對定位 - 直到作者的姓名很長，然後強制「回覆」位於通常位於其左側的文本的頂部。 –

添加到您的CSS

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

這裏是jsfiddle

編輯：作用似乎是我錯過了回覆按鈕。它可以絕對放置在右上角。 With：

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

但是，如果文字變長，那可能會與文本重疊。否則，你將不得不改變HTML。

來源

2011-10-11 17:05:12 corymathews

他也想要回復鏈接。 – brenjt

啊錯過了那部分。 – corymathews

您可以通過添加更改的項目的位置「浮動：左「，但這不會在這種情況下工作，因爲您需要回復纔會出現在「評論文本」之前。 CSS無法重新設置元素的ORDER。

當像這樣「畫到角落」時，您總是可以使用jQuery在客戶端重寫HTML。殘酷但有時這是唯一的選擇。

來源

2011-10-11 17:07:58

這將是非常困難的，有一種方法，但它是非常有限的。如果您可以保證實際評論主體的像素高度（我認爲您不能），那麼您可以內聯元素，將reply元素從流中移出（將其放置在容器的底部）並設置填充在容器上強制它下來。例如，請參閱this fiddle。它達到了預期的效果，但不會很好地適應多行評論。

來源

2011-10-11 17:11:50 Clive

CSS：Div的位置

回答

相關問題