需要帮助在HTML和CSS中对齐图像

时间:2013-06-18 09:20:34

标签: 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/> 

1 个答案:

答案 0 :(得分:0)

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

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

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