html - 将 div 对齐到另一个绝对 div 容器的底部

标签 html css

如果这已经在 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

我试过使用“ float ”、“相对”和“高度”的各种组合,但我不知道如何使 <div id="pay_line"></div>(红色边框)与 <div id="pay_line_container">(绿色边框)容器的底部对齐.

这需要专门在 IE8 中工作。

你们中的一个能帮助这位沮丧的编码员弄清楚如何做到这一点吗?

最佳答案

尝试制作它:

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

关于html - 将 div 对齐到另一个绝对 div 容器的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9472084/

相关文章:

html - 如何制作响应式导航栏?

html - CSS - 图像内的位置按钮

jquery - 我需要固定宽度容器中的图形和图像来跨越浏览器窗口的整个宽度

jquery - 如何复制 pinterest.com 的绝对 div 堆叠布局

html - 正则表达式替换 HTML 页面内的内容

html - Bootstrap 的 Jumbotron 示例如何在导航栏元素中创建空间

java - 如何测试 &lt;input/> 是否被标记为无效?

html - 文本链接通过缩放超出边界 block

css - FontAwesome v5 - 使用输入将图标添加到按钮中(来自 FA v4 的方法不再有效)

javascript - 永久设置相对放置元素的位置