Css Can'；t将内容放入子div框并自动展开父div框

我一直在尝试调整一个div的高度，以便它能够优雅地将所有其他内容推到下方，而不会重叠，但没有任何成功

我有两个消息框，其中每个消息框都位于包装器（时隙）div中，该div充当每个消息框的容器

我曾尝试将浮动设置在时间段上，并在事后清除这些内容，但没有成功

我已尝试设置

min height

和

display:block也没有成功

<div class='timeslot'>
   <div class='message'>
      <span class='header'>Header text</span>
      <span>Some really long long text</span>
   </div>
</div>


标题文本
一些很长的文字

我们的目标是把所有的东西都放在盒子里，并把它们很好地推来推去

这是一把小提琴


谢谢
 给你，伙计，我给你重写了：



.clear{clear:两个}
.message wrap{width:500px}
.message{宽度：150px；字体大小：12px；背景：EDF6FB；边框：2px实心#67C2EF；填充：5px；
-webkit边框半径：10px；-moz边框半径：10px；边框半径：10px；}
.message、.circle、.message时间{float:left；margin-right:20px}
.message time{background:#F9F9F9；padding:5px；width:150px}
乱数假文
消息
Lorem ipsum dolor sit amet，是一位杰出的领导者。被指控侵权的人。整数等分进位空白。Lorem ipsum dolor sit amet，是一位杰出的领导者。被指控侵权的人。整数等分进位空白

2012年10月19日

08:31:38



2012年10月19日

08:31:38

回应
这是一种回应

您真的需要将
#消息
设置为
位置：绝对
？因为这将把它从DOM流中移除，这就是为什么父元素不环绕它的原因。难道你就不能
float
it吗？我试着对
时隙进行
浮动
，但似乎不起作用
<style>
.clear {clear:both}
.message-wrap {width:500px}
.message {width:150px; font-size:12px; background:#EDF6FB; border:2px solid #67C2EF; padding:5px; 
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.message, .circle, .message-time {float:left; margin-right:20px}
.message-time {background:#F9F9F9; padding:5px; width:150px}
</style>

<h1>Lorem ipsum</h1>

<div class="message-wrap">

    <div class="message">
    <h2>Message</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing lacus.</p>
    </div><!-- message -->

    <img class="circle" src="http://i47.tinypic.com/2pt1lag.jpg" alt="" />

    <div class="message-time">
    <p><span class="date">2012-10-19</span><br />
    08:31:38</p>
    </div><!-- message-time -->

</div><!-- message-wrap -->

<br class="clear" />
<br />

<div class="response-wrap">

    <div class="message-time">
    <p><span class="date">2012-10-19</span><br />
    08:31:38</p>
    </div><!-- message-time -->

    <img class="circle" src="http://i47.tinypic.com/2pt1lag.jpg" alt="" />

    <div class="message">
    <h2>Response</h2>
    <p>This is a response</p>
    </div><!-- message -->

</div><!-- response-wrap -->