Question

如果已经在SO上回答过这个问题，我会提前道歉但我会疯狂地试图解决这个问题......

此代码......

<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

我尝试过使用“浮动”，“相对”和“高度”的各种组合，但我无法弄清楚如何使<div id="pay_line"></div>（红色边框）对齐{{{ 1}}（绿色边框）容器。

这需要在IE8中专门工作。

请你帮助这位沮丧的程序员找出如何做到这一点吗？

Answer 1

尝试制作它：

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

Answer 2

我不确定我是否正确理解了你的问题，但是为了得到它的底部，你不能只是绝对地定位它并使用bottom：0？这应该适用于IE8。

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

Answer 3

将vertical-align: baseline添加到您的#pay_line ID。

将div与另一个绝对div容器的底部对齐

3 个答案: