html - 将图像放在另一个 div 内的 div 的右下角-6ren

html - 将图像放在另一个 div 内的 div 的右下角

转载作者：太空宇宙更新时间：2023-11-04 04:01:05

enter image description here

我在这个问题上苦苦挣扎了 3 个小时，现在我不知道自己做错了什么。我在右下角有一个 nba 标志，但我试图将它对齐到 div 上方，就像右边的社交图标一样。我用 CSS 绑定(bind)了很多东西，但运气不好。

这里还有相关的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Basketball</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
    <link rel="stylesheet" type="text/css" href="cssfinal/style.css" />
    <link rel="stylesheet" type="text/css" href="cssfinal/loginstyle.css" />

        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>



       <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    </head>
    <body>

    <!-- PAGE 1 -->
        <div data-role="page" data-theme="a" id="page1">



            <div data-role="content" data-theme="a">




          <div class="login-box" id="login">



             <div id="loginprompt">
                <div id="header">


            <h3>BASKETBALL FANATICO</h3>
            <h5>SHADOW RTD</h5>
        </div>

                </div>
        <form method="GET">

                <div id="username" data-role="fieldcontain">     
                    <input type="text" name="username" placeholder="Username" />
                </div>
                <div id="password" data-role="fieldcontain">   
                   <input type="password" name="password" id="txtId" placeholder="Password"/>
                </div>
                <div id ="loginbtn">
                    <a data-role="button" id="log" data-theme="a" href="#page2" data-transition="slide">LOGIN</a>
                </div>
            </form>

            <br />

           <div id="icons">


<div>

<img src="socialicons/home.png" class="left" ></img>

<img src="socialicons/facebook.png" class="left" ></img>


<img src="socialicons/twitter.png" class="left" ></img>

<img src="socialicons/googleplus.png" class="left" ></img>

<img src="socialicons/linkedin.png" class="left" ></img>

</div>
<div><img src="rsicloud.png" class="right" ></img></div>
</div>

            </div>


            </div>

        </div>



    </body>
</html>

这是相关的 Css。

.login-box {
    margin: auto;
    padding: 10px 30px 25px 25px;
    background: none repeat scroll 0% 0% rgb(241, 241, 241);
    border: 1px solid rgb(229, 229, 229);
    width:300px;
}


.ui-field-contain {

    border-bottom-width: 0px;

}

#loginbtn {

    text-align: center;
    width: 150px;
    margin:  auto;


}

#loginprompt{
text-align: right;
}

#loginprompt h4{
text-align: left;
font-size: 14px;
}
#header{
    text-align: center;

}

#header h5{

    color: #373E4A;
    font-size: 11px;
    font-family: Courier;


}

#header h3{

    font-family: sans-serif;
}

#login{

width: 85%;
    margin:auto;
}


#icons{
    text-align: right;
}

.left{

    margin: 2px;
    float:left;

}

.right{
    float:right;


}

a#log.ui-link.ui-btn.ui-btn-a.ui-shadow.ui-corner-all {
    background-color: #4289C1;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
}