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 between：

<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 に答える