元素根据窗口大小更改位置

时间：2017-03-17 15:18:39

标签： html css

我正在尝试在窗口的右侧放置一个注册表单，我希望它粘在底部但不要到达顶部，这看起来我成功了，有一个问题，取决于屏幕分辨率，表格改变了它的位置，例如我的第二台显示器是1920x，我没有看到按钮，我从电子邮件中看到它，我怎样才能让它在所有分辨率上保持相同的位置？ / p>

我尝试使用谷歌搜索，但我没有找到工作的东西，对不起，如果我太过诺布，但这已经给了我一段时间的问题..我想找到一个好的方法来制作并使用它未来也是......

它的外观应该是

How it should Look

这是其他显示器出错的原因： How it should not look

代码：

    SET @SQLCreateTableVSC = 'CREATE TABLE ##VSC_Temp (['
                        +@VSCColName+'] nvarchar(max)
                        ,['+@moname1+'] nvarchar(max)
                        ,['+@moname2+'] nvarchar(max)
                        ,['+@moname3+'] nvarchar(max)
                        ,['+@moname4+'] nvarchar(max)
                        ,['+@moname5+'] nvarchar(max)
                        ,['+@moname6+'] nvarchar(max)
                        ,['+@moname7+'] nvarchar(max)
                        ,['+@moname8+'] nvarchar(max)
                        ,['+@moname9+'] nvarchar(max)
                        ,['+@moname10+'] nvarchar(max)
                        ,['+@moname11+'] nvarchar(max)
                        ,['+@moname12+'] nvarchar(max)
                        ,['+@moname13+'] nvarchar(max)
                        )'

    execute sp_executeSQL @SQLCreateTableVSC
    , N'@VSCcolname nvarchar(max)
    ,@moname1 nvarchar(max)
    ,@moname2 nvarchar(max)
    ,@moname3 nvarchar(max)
    ,@moname4 nvarchar(max)
    ,@moname5 nvarchar(max)
    ,@moname6 nvarchar(max)
    ,@moname7 nvarchar(max)
    ,@moname8 nvarchar(max)
    ,@moname9 nvarchar(max)
    ,@moname10 nvarchar(max)
    ,@moname11 nvarchar(max)
    ,@moname12 nvarchar(max)
    ,@moname13 nvarchar(max)'
    , @VSCcolname=@VSCcolname
    , @moname1=@moname1
    , @moname2=@moname2
    , @moname3=@moname3
    , @moname4=@moname4
    , @moname5=@moname5
    , @moname6=@moname6
    , @moname7=@moname7
    , @moname8=@moname8
    , @moname9=@moname9
    , @moname10=@moname10
    , @moname11=@moname11
    , @moname12=@moname12
    , @moname13=@moname13

CSS代码：

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/registerpage.css">
<link href='//fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>

<title>Register Page | Home</title>
</head>

<body>
<div class="background-image"></div>
<div class="content">

<div id="main">
    <form id="loginform" action="/action_page.php">
        <label class="usernam" for="username">Username</label>
        <input type="text" id="username" name="username" placeholder="Insert your username...">

        <label class="usernam" for="pass">Password</label>
        <input type="password" class="pass" name="pass" placeholder="Insert your password...">

        <label class="usernam" for="pass2">Repeat Password</label>
        <input type="password" class="pass" name="pass2" placeholder="Insert your password again">

        <label class="usernam" for="useremail">E-Mail</label>
        <input type="email" class="pass" name="userem" placeholder="Insert your email">

        <input type="submit" value="Register">
    </form>
</div>

<!-- <img id="userimg" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/24/man-icon.png"/> -->
<!-- <img id="passimg" src="http://icons.iconarchive.com/icons/webiconset/application/24/Register-icon.png"/> -->

</div>
</body>

</html>

这令我头疼，这是它在我的显示器上的样子： sadda

这就是1920x1080的外观 enter image description here

我尝试使用px和％两个结果是相同的：@ please ...我不明白..

好吧，我解决了这个问题但是现在，我添加的图标并没有保持它们的位置，它应该如何在所有屏幕上显示。 asfsaf

它如何在更大的分辨率上看... asfaf

Div Code：

html,body {
    overflow: auto;
}

.background-image
{
    background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2015/07/beautiful-light-city-wallpaper-hd-1080p.jpg");
    position: fixed;
    background-size: cover;
    left: 0;
    right: 0;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(3px);

}

.content {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    margin-left: 20px;
    margin-right: 20px;
}

#main {
    line-height: 400px;
    position: fixed;
    text-align:center;
    border: 3px solid #f2f2f2;
    border-radius: 2px;
    left: 600px;
    width: 250px;
    height: 100%;

    margin-top: 132px;
    margin-left: 399px;
    margin-right: 399px;
    background-color: #f2f2f2;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: 12px 10px 35px -11px rgba(0,0,0,0.75);
    -moz-box-shadow: 12px 10px 35px -11px rgba(0,0,0,0.75);
    box-shadow: 12px 10px 35px -11px rgba(0,0,0,0.75);
}

#loginform {
    display: inline-block;
    line-height: 5px;
    top: 10%;
    height: auto;
}

#loginform #username, .pass {
    width: 100%;
    padding: 12px 45px;
    margin: 30px 0;
    display: inline-block;
    border: 2px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.usernam {
    font-family: 'Bangers';
    font-size: 30px;
}

/*#userimg {
    position: absolute;
    left: 425px;
    bottom: -278px;
}

#passimg {
    position: absolute;
    left: 425px;
    bottom: -400px;
}*/


input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/*#copyright {
    position: absolute;
    bottom: -555px;
    left: 580px;
}*/

CSS：

<div id="main">
    <form id="loginform" action="/action_page.php">
        <label class="usernam" for="username">Username</label>
        <input type="text" id="username" name="username" placeholder="Insert your username...">
        <img id="userimg" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/24/man-icon.png"/>

        <label class="usernam" for="pass">Password</label>
        <input type="password" class="pass" name="pass" placeholder="Insert your password...">
        <img id="passimg" src="http://icons.iconarchive.com/icons/webiconset/application/24/Register-icon.png"/>

        <label class="usernam" for="pass2">Repeat Password</label>
        <input type="password" class="pass" name="pass2" placeholder="Insert your password again">
        <img id="pass2img" src="http://icons.iconarchive.com/icons/webiconset/application/24/Register-icon.png"/>

        <label class="usernam" for="useremail">E-Mail</label>
        <input type="email" class="pass" name="userem" placeholder="Insert your email">
        <img id="emimg" src="http://icons.iconarchive.com/icons/dario-arnaez/genesis-3G/24/Emails-Folder-icon.png"/>

        <input type="submit" value="Register">
    </form>
</div>

1 个答案:

答案 0 :(得分：0)

您需要的唯一定位是：

#main {
    position: fixed;
    right: 0;
    bottom: 0;
}

（在这里你可以根据需要编辑右边的值。）

请删除以下属性：

#main {
    left: 600px;
    margin-top: 132px;
    margin-left: 399px;
    margin-right: 399px;
}

这是“魔术”数字。 修复表格支架的高度，它将完成。

相关问题
最新问题