の下に、これはすでに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> <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>
私は「フロート」と「相対的」と「高さ」の様々なコンボを使用してみましたが、私はどのようにトンを把握することはできません...
この画像を生成していますo <div id="pay_line"></div>
(赤い枠線)を<div id="pay_line_container">
(緑色の枠)の下部に合わせます。
IE8で特に動作する必要があります。
あなたはこの不満足なコーダーがこれを行う方法を理解するのを手伝ってもらえますか?
回答ごとに、ポジションアブソリュートとボトムが前方にある可能性があります。しかし、あなたのページには(単純化されたバージョンではなく)それが壊れているものがあると思います。赤いdivは私のためにIE8の底に整列していますが、divは右にあふれています。 – kaj
@KAJ - 私はJS FiddleとChromeで試したときにそれが起こるのを見ました。アブソリュートとボトムを使うと、やっぱりやりました... –