Question

我只是想知道我们需要在编码中添加什么，以便我的div位置会根据浏览器的窗口大小自动调整？目前，每当我减小浏览器窗口的大小时，我的div和输入框总是不合适。

以下是我的代码：

<html>
<head>
    <title>Login</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="bootstrap.min.css">

    <script type="text/javascript">
        function startTime()
        {
            var today=new Date();
            var y=today.getFullYear();

            document.getElementById('datetime').innerHTML="&#169; Systems 2003-"+y+"<br>"+"All rights reserved.";
        }
    </script>
    <style type="text/css">
        #username{
            position:absolute;
            top:190px;
            left:70px;
        }
        #login{
            position:absolute;
            top:260px;    
            left:545px;
        }
        #password{    
            position:absolute;
            top:240px;    
            left:70px;
        }

        #box{
            border:1px solid #eaeaff;
            background-color: #eaeaff;
            border-radius:5px;
            width:400px;
            height:400px;   
            margin-top:100px;
            margin-left:360px;
            box-shadow: 4px 4px 10px black;
        }
        .btn{
            height: 30px;
            width: 100px;
            position:absolute;
            top:395px;    
            left:620px;
        }
        #logo{
            position:absolute;
            top:130px;    
            left:595px;
        }
        #model{
            font-size: 25px;
            position:absolute;
            top:200px;    
            left:545px;
        }
        #datetime{
            margin-top:20px;
        }   
    </style> 
</head>
<body onload="startTime()">
    <div class="container">
        <div id="box">
            <img src="logo.png" alt="logo" id="logo"/>
            <div id="model"><p>Welcome</p></div>
            <div id="login"><p>Please login</p></div>
            <form class="form-signin">
                <div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
                <div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
                <button class="btn btn-primary">Login</button>
            </form>
        </div>
        <div id="datetime" align="center">
        </div>
    </div>
</body>

Answer 1

第一步：删除你绝对定位的CSS内容。

第二步：使用此标记查看this demo bootply：

<div class="container">
    <div class="row">
        <div id="box" class="col-sm-6 col-sm-offset-3">
            <img src="logo.png" alt="logo" id="logo">
            <div id="model">
                <p>Welcome</p>
            </div>
            <div id="login">
                <p>Please login</p>
            </div>
            <form class="form-signin">
            <div class="form-group">
                <input type="text" class="form-control" id="username" placeholder="Username">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="password" placeholder="Password">
            </div>
            <div class="form-group">
                <button class="btn btn-primary">Login</button>
            </div>
            </form>
            <div id="datetime" align="center">
            </div>
        </div>
    </div>
</div>

第三步：更熟悉how Bootstraps grid works.

HTH：）

Answer 2

你不需要所有那些绝对的位置。将CSS替换为：HERES A DEMO

#box {
    border:1px solid #eaeaff;
    background-color: #eaeaff;
    border-radius:5px;
    width:400px;
    height:400px;
    margin:100px auto;
    box-shadow: 4px 4px 10px black;
    text-align:center;
}

.btn {
    height: 30px;
    width: 100px;
}

#model {
    font-size: 25px;
}
#datetime {
    margin-top:20px;
}

Answer 3

这是一个没有引导程序的基本解决方案：请记住，只有在必要时才使用绝对定位。

注意： 如果您打算将登录文本输入推送到侧面，则可以正常工作。然而，就UX而言，这可能是一个非常糟糕的主意。

<html>
<head>
    <title>Login</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="bootstrap.min.css">

    <script type="text/javascript">
        function startTime()
        {
            var today=new Date();
            var y=today.getFullYear();

            document.getElementById('datetime').innerHTML="&#169; Systems 2003-"+y+"<br>"+"All rights reserved.";
        }
    </script>
    <style type="text/css">
		html, body{
			height:100%; margin:0; padding:0;
		}
        #box{
            border:1px solid #eaeaff;
            background-color: #eaeaff;
            border-radius:5px;
            width:400px;
            height:400px;   
            box-shadow: 4px 4px 10px black;
			text-align:center;
        }
        .btn{
            height: 30px;
            width: 100px;
        }
        #model{
            font-size: 25px;

        }
        #datetime{
            margin-top:20px;
        }   
		.form-control{
			margin:10px;
		}
		
		.form-container{
			width:25%;
			height:500px;
			float:left;
			min-width:185px;
			
		}
		.container{
		 height:500px;
		 width:100%;
		}
		#box-container{
			width:48%;
			height:500px;
			float:left;
		}
		#box2{
            width:400px;
		}
		#form-signin1{
			position: relative;
			top: 35%;
			transform: translateY(-50%);
		}
    </style> 
</head>
<body onload="startTime()">		
    <div class="container">
		<div class="form-container">
			<form id ="form-signin1" class="form-signin">
				<div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
				<div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
			</form>
		</div>
		
		<div id="box-container">
			<div id="box">
				<img src="logo.png" alt="logo" id="logo"/>
				<div id="model"><p>Welcome</p></div>
				<div id="login"><p>Please login</p></div>
				
				<form class="form-signin">
					<button class="btn btn-primary">Login</button>
				</form>
			</div>
			<div id="box2">
				<div id="datetime" align="center"></div>
			</div>
		</div>
    </div>
</body>

Answer 4

这样的东西？

Fiddle for you

   #box {
       border:1px solid #eaeaff;
       background-color: #eaeaff;
       border-radius:5px;
       width:300px;
       height:400px;
       margin-top:100px;
       margin-left:360px;
       box-shadow: 4px 4px 10px black;
       padding: 3em 4em;
   }
   #box form, #box header {
       text-align: right;
   }
   #box .form-group {
       margin-bottom: 15px;
       /*boostrap will already have this so delete it */
   }
   .btn {
       height: 30px;
       width: 100px;
   }
   #model {
       font-size: 25px;
              }
   #datetime {
       margin-top:20px;
   }

<div class="container">
   <div id="box">
    <header>
        <img src="logo.png" alt="logo" id="logo" />
         <h2 id="model">Welcome</h2>

        <p>Please login</p>
    </header>
    <section>
        <form class="form-signin">
            <div class="form-group">
                <input type="text" class="form-control" id="username" placeholder="Username">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="password" placeholder="Password">
            </div>
            <button class="btn btn-primary">Login</button>
        </form>
    </section>
  </div>
  <div id="datetime" align="center"></div>

浏览器窗口更改时，HTML div不在适当的位置

4 个答案: