Question

enter image description here

我正在努力解决这个问题3个小时，现在我不知道我做错了什么。我在右下角有一个nba标识，但我试图将它对齐在div上方，就像右边的社交图标一样。我用css捆绑很多东西而没有运气。

这也是相关的代码。

<!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;
}

有人可以请教我吗？我不是经验丰富的网络开发人员所以它甚至可能是一个愚蠢的错误，如果它是抱歉。

Answer 1

刚刚修改了代码。由于缺乏图像，我无法看到它的工作与否。

检查演示。 http://jsbin.com/yoqepoqa/1/

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

1 个答案: