2012-02-27 16 views
0

の下に、これはすでにSO上で回答されている場合、私は先行謝るが、私はこれを理解しようとしておかしくなりそうだ...合わせdivの別の絶対のdivコンテナ

このコード...

<html> 
    <head> 
     <title>Print Check Sample</title> 
     <style type="text/css"> 
      body { 
       font-family: "sans-serif"; 
      } 
      #address { 
       position: absolute; 
       top: 0.25in; 
       left: 0; 
      } 
      #check_num { 
       position:absolute; 
       top: 0; 
       right: 0.5in; 
       font-size: 0.2in; 
      } 
      #container { 
       position: relative; 
       margin: 0.25in; 
       width: 100%; 
       height:3.5in; 
       border: 1px gray solid; 
      } 
      #date { 
       position: absolute; 
       top: 0.5in; 
       right: 1.5in; 
       font-size: 0.15in; 
      } 
      #pay_line { 
       float: left; 
       width: 10.5in; 
       border:2px red dashed; 
      } 
      #pay_line_container { 
       position: absolute; 
       top: 1.8in; 
       border:2px green dashed; 
      } 
      #pay_line_message { 
       float:left; 
       width:1in; 
       font-size: 0.15in; 
       border:2px blue dashed; 
      } 
      #void_message { 
       position: absolute; 
       top: 0.75in; 
       right: 0.1in; 
       font-size: 0.2in; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="check_num">1000</div> 
      <div id="address"> 
       <b>Estate Of JAMES SMITH</b><br> 
       35 Addison Avenue<br> 
       New York, NY 00000<br> 
       (123)456-7890 
      </div> 
      <div id="date"> 
       <i>Date</i>&nbsp;<u>02/08/2012</u> 
      </div> 
      <div id="void_message"> 
       <b>VOID 180 DAYS FROM CHECK DATE</b> 
      </div> 
      <div id="pay_line_container"> 
       <div id="pay_line_message"> 
        <i>Pay To The Order Of:</i> 
       </div> 
       <div id="pay_line"></div> 
      </div> 
     </div> 
    </body> 
</html> 

私は「フロート」と「相対的」と「高さ」の様々なコンボを使用してみましたが、私はどのようにトンを把握することはできません...

pay check sample

この画像を生成していますo <div id="pay_line"></div>(赤い枠線)を<div id="pay_line_container">(緑色の枠)の下部に合わせます。

IE8で特に動作する必要があります。

あなたはこの不満足なコーダーがこれを行う方法を理解するのを手伝ってもらえますか?

+0

回答ごとに、ポジションアブソリュートとボトムが前方にある可能性があります。しかし、あなたのページには(単純化されたバージョンではなく)それが壊れているものがあると思います。赤いdivは私のためにIE8の底に整列していますが、divは右にあふれています。 – kaj

+0

@KAJ - 私はJS FiddleとChromeで試したときにそれが起こるのを見ました。アブソリュートとボトムを使うと、やっぱりやりました... –

答えて

3

はそれを作ってみましょう:

#pay_line { 
    position: absolute; 
    bottom: 0px; 
    left: 74px; 
} 
+0

男、私はそれを早く試したと思って失敗しましたが、それはトリックです。私はいくつかの投稿を読んでいたと絶対と0の底を使用して、私はそれを試したと思ったが、私は右にそれを接続していないと思う... –

2

私は私が正しくあなたの質問を理解してわからないんだけど、一番下にそれを得るために、あなただけの絶対にそれを配置し、下部に使用できませんでした:0?これはIE8で動作するはずです。

#pay_line {position: absolute; bottom: 0;} 
0

#pay_linevertical-align: baselineを追加します。

関連する問題