Дочерний div рядом с родительским div, внизу

0

У меня есть три div. Контейнер div, содержащий два дочерних div внутри. Первый дочерний div имеет фиксированную ширину, но высота должна определяться текстом внутри (это поле сообщения). Сразу после этого div в одной строке должен быть еще один div один строчный максимум (в основном, время), и он должен располагаться в нижней части родительского div (например, если первый дочерний div содержит 5 строк, затем второй дочерний div должен быть сразу после первого дочернего div, на уровне нижней строки первого ребенка (из окна сообщения))

В основном, я пытаюсь воссоздать эту вещь: Изображение 174551

Обратите внимание, как время близко к сообщению?

Во всяком случае, для этого я решил, что мне нужно сделать свое время div размером с родительским div. Как мне это сделать?

заранее спасибо

Итак, это будет HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod </p>

</div>
<div class = "dateandtime">11:37AM</div>
</div>

И CSS:

.yellowmessage { */ Parent div /*
padding:0 2% 0 0;
float:left;
}

.themessage {
font-size:2.5em;
display: inline-block;
border-radius:20px;
padding:3% 0 3% 0;
max-width:90%;
background-color:rgb(246,227,143);
float:left;
}

.dateandtime {
float:left;
}
  • 0
    Добавьте свою HTML-разметку и CSS.
  • 0
    «Мне нужно, чтобы мое время делило размер родительского div» - сделать width:100%; height:100%; дочернего div width:100%; height:100%;
Теги:
css-float

2 ответа

0

Вы можете использовать это, Eсть ответ здесь о вашем вопросе.

Я добавил к этому время. Я внес некоторые изменения.

Live Demo **http://jsfiddle.net/mek5Z/1348/**

0

Fiddle

Предполагая, что это ваша структура HTML:

<div class="yellowmessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
    </div>
    <div class="dateandtime">11:37AM</div>
</div>
<div class="bluemessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare risus vulputate consequat semper. Quisque facilisis facilisis pulvinar. Maecenas aliquam, orci id rhoncus tempus, lacus tellus mattis diam, eget elementum eros dui vel leo.</p>
    </div>
    <div class="dateandtime">11:49AM</div>
</div>

Это может быть ваш CSS

.yellowmessage, .bluemessage {
    position: relative;
    margin: 5% 2%;
}
.themessage {
    font-size:1.85em;
    border-radius:20px;
    padding: 0 2%;
    max-width: 90%;
    box-shadow: inset 0 -4px rgba(0, 0, 0, 0.07), inset 0 22px 25px rgba(255, 255, 255, 0.58), 0 3px 11px rgba(0, 0, 0, 0.28);
}
.yellowmessage > .themessage {
    float: left;
    background-color: #FFF980;
}
.bluemessage > .themessage {
    float: right;
    background-color: #A7DBD8;
}
.dateandtime {
    position: absolute;
    bottom: 0;
    font-size: 80%;
}
.bluemessage > .dateandtime {
    left: 0;
}
.yellowmessage > .dateandtime {
    right: 0;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню