css - 无法将内容放入子 div 框并自动展开父框

Question

我一直在尝试调整 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>

我们的目标是试图将所有东西都放在盒子里并很好地推动东西。

这是一个小提琴

http://jsfiddle.net/nawar/qjDPp/

谢谢！

Answer 1

给你，伙计，我为你重写了它：

http://jsfiddle.net/wAhnB/

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