Question

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

无法在子div框中插入内容并自动展开父级

1 个答案: