當瀏覽器窗口發生變化時，HTML div脫離位置

我只是想知道我們需要在編碼中添加什麼，以便我的div位置根據瀏覽器的窗口大小自動調整？目前，當我縮小瀏覽器窗口的大小時，我的div和輸入框始終不能使用。當瀏覽器窗口發生變化時，HTML 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>

來源

2015-03-31 Coolguy

爲什麼你使用'位置：absolute'的投入？ – CodeGodie 2015-03-31 17:51:01

我想確定輸入的位置。任何想法來改善它？ – Coolguy 2015-03-31 17:52:45

絕對定位大多數元素時，它們應始終具有相對位置的父親。除非你想讓所有地獄都散開。 – dowomenfart 2015-03-31 17:53:58

步驟一：刪除你的絕對定位的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 :)

來源

2015-03-31 17:57:45 Ted

謝謝！我試過你的代碼。但#box不在頁面的中心。任何想法？ – Coolguy 2015-03-31 18:10:20

如果你可以使用CSS3，使用'position：absolute; transform：翻譯（-50％，-50％; left：50％; top：50％;'on the＃＃）＃ – 2015-03-31 18:12:26

對不起，這是我的錯，現在我的#box已經在頁面的中心了 – Coolguy 2015-03-31 18:12:39

你不需要所有這些位置絕對

。這種替換你的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; 
}

來源

2015-03-31 17:56:28 CodeGodie

-2

喜歡的東西這個？

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>

來源

2015-03-31 18:00:39

哇爲什麼降價？ – 2015-03-31 18:03:31

我沒有投票給你，但是你的例子在調整大小時被從頁面中推出。 – 2015-03-31 18:36:19

這裏是沒有引導一個基本的解決辦法：只記得使用絕對定位時，你絕對必須的。

注意：如果您打算將您的登錄文本輸入推到側面，這可以工作。然而，就用戶體驗而言，這可能是一個非常糟糕的主意。

<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"> 
 
\t \t html, body{ 
 
\t \t \t height:100%; margin:0; padding:0; 
 
\t \t } 
 
     #box{ 
 
      border:1px solid #eaeaff; 
 
      background-color: #eaeaff; 
 
      border-radius:5px; 
 
      width:400px; 
 
      height:400px; 
 
      box-shadow: 4px 4px 10px black; 
 
\t \t \t text-align:center; 
 
     } 
 
     .btn{ 
 
      height: 30px; 
 
      width: 100px; 
 
     } 
 
     #model{ 
 
      font-size: 25px; 
 

 
     } 
 
     #datetime{ 
 
      margin-top:20px; 
 
     } 
 
\t \t .form-control{ 
 
\t \t \t margin:10px; 
 
\t \t } 
 
\t \t 
 
\t \t .form-container{ 
 
\t \t \t width:25%; 
 
\t \t \t height:500px; 
 
\t \t \t float:left; 
 
\t \t \t min-width:185px; 
 
\t \t \t 
 
\t \t } 
 
\t \t .container{ 
 
\t \t height:500px; 
 
\t \t width:100%; 
 
\t \t } 
 
\t \t #box-container{ 
 
\t \t \t width:48%; 
 
\t \t \t height:500px; 
 
\t \t \t float:left; 
 
\t \t } 
 
\t \t #box2{ 
 
      width:400px; 
 
\t \t } 
 
\t \t #form-signin1{ 
 
\t \t \t position: relative; 
 
\t \t \t top: 35%; 
 
\t \t \t transform: translateY(-50%); 
 
\t \t } 
 
    </style> 
 
</head> 
 
<body onload="startTime()"> \t \t 
 
    <div class="container"> 
 
\t \t <div class="form-container"> 
 
\t \t \t <form id ="form-signin1" class="form-signin"> 
 
\t \t \t \t <div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div> 
 
\t \t \t \t <div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="box-container"> 
 
\t \t \t <div id="box"> 
 
\t \t \t \t <img src="logo.png" alt="logo" id="logo"/> 
 
\t \t \t \t <div id="model"><p>Welcome</p></div> 
 
\t \t \t \t <div id="login"><p>Please login</p></div> 
 
\t \t \t \t 
 
\t \t \t \t <form class="form-signin"> 
 
\t \t \t \t \t <button class="btn btn-primary">Login</button> 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 
\t \t \t <div id="box2"> 
 
\t \t \t \t <div id="datetime" align="center"></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    </div> 
 
</body>

來源

2015-03-31 18:29:59

當瀏覽器窗口發生變化時，HTML div脫離位置

回答

相關問題