HTML CSS box Styling

Question

Я пытаюсь отформатировать поле, чтобы оно выглядело как функция обновления статуса.В настоящее время это выглядит так.

В идеале мне бы хотелось, чтобы в верхнем правом углу окна отображалась дата, а в нижнем правом углу - «Ответы».Как вы можете видеть на картинке, на самом деле это не так.Любая помощь о том, как это сделать, очень ценится.

Мой код CSS здесь.http://jsfiddle.net/hKcmu/

Большое спасибо!

Answer 1

добавьте

position: relative;

к вашему содержащему div, затем используйте

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 .