父div旁边的子div，位于底部

Question

我有三个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;
}

Answer 1

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;
}

Answer 2

您可以使用此功能，对您的问题有答案here。

我增加了时间。我做了一些改变。

直播Demo **http://jsfiddle.net/mek5Z/1348/**