Блог

Я пытаюсь выровнять эту серую дату внизу справа в этом контейнере. Она должна располагаться в нижней части контейнера, а не в конце текста. Я создал для этого CodePen:http://codepen.io/adrianTNT/pen/IciCH

Есть идеи? Вероятно, я могу сделать это с помощью неаккуратного кода, но я уверен, что должен быть чистый способ сделать это с помощью правильного CSS-кода.

 body{
    background-color:#0e91a1;
  padding:10px;
}

.comment{
    padding:10px;
    margin:0px;
    margin-bottom:10px;
    background-color:#FFF;
    border-radius:4px;
    box-shadow: 1px 1px 1px #555;
    min-height:50px;
}

.comment_text{
    font-family:monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New";
}

.comment_date{
    font-family:monospace, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New";
    color:#CCC;
    display:inline-block;
    float:right;
}

img.comment_avatar{
    border-radius:4px;
    position:relative;
    display:inline;
    margin-right:10px;
    margin-bottom:5px;

}
.comment_name{
    font-weight:bold;
}
  

Вот другое решение: http://jsfiddle.net/7kdar/2 /.

Во-первых, .comment абзац расположен относительно:

 .comment{
    padding:10px;
    margin:0px;
    margin-bottom:10px;
    background-color:#FFF;
    border-radius:4px;
    box-shadow: 1px 1px 1px #555;
    min-height:50px;
    position: relative;
}
  

Во-вторых, .comment_date позиционируется абсолютно с использованием .comment координат:

 .comment_date{
    font-family:monospace, Consolas, "Andale Mono", "Lucida Console", 
                "Lucida Sans Typewriter", Monaco, "Courier New";
    color:#CCC;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
  

В-третьих, чтобы убедиться, что .comment_date не перекрывается с .comment_text , в конце .comment_date добавляется новый невидимый элемент, размер которого равен наибольшей дате:

 .comment_text:after {
    content: "3 Jul 23:36";
    color: white;
}
  

Как насчет того, чтобы просто использовать float: right; для вашего .comment_date span лайка на http://codepen.io/anon/pen/HpBGd

РЕДАКТИРОВАТЬ: Также удалите display:inline-block и измените <p> на <div> и comment_date <span> на div, как я сделал в приведенном выше codepen (обновленном), и я думаю, что это решит проблемы.