css - 父 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

你可以使用这个，这里有一个关于你的问题的答案。

我已经为此增加了时间。我做了一些改变。

现场演示 **http://jsfiddle.net/mek5Z/1348/**

Answer 2

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