html - div 垂直 float

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，我不希望它们相互 float ，我希望消息 div 也根据内容获取自动高度。

Answer 1

你应该为此使用 float 。 float:left , float:right 和 clear:both inbetween :

<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