У меня есть три div. Контейнер div, содержащий два дочерних div внутри. Первый дочерний div имеет фиксированную ширину, но высота должна определяться текстом внутри (это поле сообщения). Сразу после этого div в одной строке должен быть еще один div один строчный максимум (в основном, время), и он должен располагаться в нижней части родительского div (например, если первый дочерний div содержит 5 строк, затем второй дочерний div должен быть сразу после первого дочернего div, на уровне нижней строки первого ребенка (из окна сообщения))
В основном, я пытаюсь воссоздать эту вещь:
Обратите внимание, как время близко к сообщению?
Во всяком случае, для этого я решил, что мне нужно сделать свое время 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;
}
Предполагая, что это ваша структура 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;
}
width:100%; height:100%;
дочернего divwidth:100%; height:100%;