HTML CSS樣式框

Question

我試圖格式化一個框，看起來像一個「狀態更新」像功能。 目前，這是它的樣子。

理想情況下，我想在框的右上角顯示日期和右下角以顯示「答覆」。正如你從圖片中看到的那樣，它並沒有真正做到這一點。 任何幫助如何做到這一點，不勝感激。

我的CSS代碼在這裏。 http://jsfiddle.net/hKcmu/

非常感謝！

Answer 1

添加

position: relative; 

您包含分區，然後使用

boxytest sup 
{ 
    position: absolute; 
    right: 2px; 
    top: 2px; 
} 

boxytest sub 
{ 
    position: absolute; 
    right: 2px; 
    bottom: 2px; 
} 

的日期/回覆的位置。

下面有更新的Fiddle

編輯

您可以使用在boxytest填充，以應付文本太長，

這使上面和文本的下方有足夠的空間日期/回覆

boxytest 
    { 
    position: relative; 
    ..... 
    padding: 20px 0; 
    } 

這使得右邊的空間

boxytest 
    { 
    position: relative; 
    ..... 
    padding: 20px 0; 
    padding: 4px 120px 4px 0; 
    } 

更新Fiddle

Answer 2

使用的position: relative和position: absolute組合：

boxytest { 
    /* all the other CSS */ 
    position: relative; 
} 

boxytest sup { 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 48%; 
} 
boxytest sub { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    height: 48%; 
}​ 

JS Fiddle demo。