1

私は div の高さを調整しようとしていましたが、その下にある他のすべてのコンテンツを優雅に、オーバーラップせずに押し込み、成功しませんでした。

それぞれのコンテナーとして機能するラッパー (タイムスロット) div 内にある 2 つのメッセージ ボックスがあります。

タイムスロットにフローティングを設定しようとしましたが、その後何をクリアしても成功しませんでした

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/

ありがとう！

4

1 に答える 1

0

どうぞ、あなたのために書き直しました：

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 -->
于 2013-03-15T17:30:50.650 に答える