0

我有以下内容：

<!-- 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 输出的图像： 1

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

4

2 回答 2

5

您应该为此使用浮点数。float:left ， float:right 和 clear:both 介于两者之间：

<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 来自 jsFiddle 的屏幕截图

于 2013-01-31T02:48:55.393 回答
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/

于 2013-01-31T02:45:40.263 回答