div垂直浮动

Question

我有以下内容：

<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
   <div style="position:absolute;left:1px;top:15px;">
            IMAGE GOES HERE
    </div>
    <div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
            messages go here
    </div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
     <div style="position:absolute;right:1px;top:15px;">
       IMAGE HERE
      </div>
      <div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
            messages go here
      </div>
</div>

这是HTML输出的图像：

请帮我按顺序获取这些div，我不希望它们互相浮动，我希望消息div也能根据内容获得自动高度。

Answer 1

你应该使用浮点数。 float：left，float：right和clear：两者之间：

<div style="width:100%;position:relative;min-height:100%;float:left">
    <div style="float:left">img</div>
    <div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
    <div style="float:right">img</div>
    <div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>

您可以在此处看到它：jsfiddle

Answer 2

从邮件DIV中删除绝对位置。写得像这样：

<div style="position:relative;">
   <div style="position:absolute;left:1px;top:15px;">
            IMAGE GOES HERE
    </div>
    <div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
            messages go here
    </div>
</div>

<div style="position:relative;">
     <div style="position:absolute;right:1px;top:15px;">
       IMAGE HERE
      </div>
      <div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
            messages go here
      </div>
</div>

选中此http://jsfiddle.net/y44NC/2/