html - 需要帮助对齐 HTML 和 CSS 中的图像

标签 html css image alignment

请您协助我查询。我想让阴影 png 与盒子的边缘对齐。我有 3 张图像冒充阴影,最后一个阴影,即“top_right”,无论我尝试如何处理边距,都不会落到位。以下是代码,如有任何帮助,我将不胜感激。

腰带

    <style type="text/css">
body    {
            background-color:#e1f2ff;
            font-family:TW Cen MT;
            }

    h1  { color:#000;
    }

#footer {
    background-color:#313131;
        color:#fff;
        font-style:italic;
                    }
input#box {
            background:#efd2a7;
            font-size:10pt;
            }

        #content {

            background-width:600px;
                }


                    a:hover#butt    {
                        background:url("images/butt_over.png");
                            }

                #top_left {
                    margin-left:-17px;
                    {

                    #top_right {
                        margin-right:300px;
                        }


                    #bott {
                        margin-top:10px;
                        }
    </style>
    </head>

    <body>
    <div id="container" style="width:900px; height:900px;" align="center">

        <div id="header" align="center">
        <h2>We’re currently constructing our website.
    Please leave your name and e-mail address below and we will
    let you know when the site launches.
    You will also receive fantastic offers & a
    discount voucher for your time!</h2></div>

    <div id="content" style="background-color:#fff;height:450px;width:550px;">

    <img src="images/shad_top_left.png" id="top_left" style="float:left; vertical-align:top" >
    <img src="images/logo.png" width="300" height="100">
    <img src="images/shad_top_right.png" id="top_right" style="float:right;" ><br/>
    <h2>Send us your e-mail address</h2>
    <br/><br/> 

最佳答案

首先你的代码中有 2 个错误你需要关闭左上角末尾的每个打开的括号你打开了另一个括号而不是关闭了现有的括号....也使用 position:absolute

            #top_left {
                margin-left:-17px;
                    } // you had put { here instead

                #top_right {
                    position: absolute;
                    margin-left :300px;
                    }

关于html - 需要帮助对齐 HTML 和 CSS 中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17165103/

相关文章:

css - 使用 aspnet 图像框架的 css 中的 Sprite

jquery - 使用 jquery 重新启动条件后的动画

html - 如何内嵌 3 个 div,最后使用自动宽度?

html - 如何在图片的右上角放置按钮

html - 更正 CSS 以按特定顺序显示 html 表单元素?

css - CSS 内容字体大小增加的 IE9 错误

html - 在 JSP 中加载 img

python - Numpy 图像切片返回黑色补丁/错误值

html - 固定大小的子菜单

javascript - 如何从表中隐藏所有 tr 除了单击一个