Javascript 很少<；部门>；当我向下恢复页面时，元素会移动_Javascript_Html_Css

Javascript 很少<；部门>；当我向下恢复页面时，元素会移动

javascript html css

Javascript 很少<；部门>；当我向下恢复页面时，元素会移动,javascript,html,css,Javascript,Html,Css,我不熟悉HTML和CSS。我的问题可能很简单，但我找不到解决办法。我试着开发一个简单的网页当屏幕最大化时，它看起来很好，但是当我尝试还原页面时，一些元素移动，屏幕布局完全改变这是我用于它的HTML <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4

我不熟悉HTML和CSS。我的问题可能很简单，但我找不到解决办法。我试着开发一个简单的网页

当屏幕最大化时，它看起来很好，但是当我尝试还原页面时，一些

元素移动，屏幕布局完全改变

这是我用于它的HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript">
function buttonchange(type)
{
document.getElementById("change").style.visibility='visible';
document.getElementById("change").value= type;

}

</script>
<title>PFP ADMIN</title>
</head>
<body>
<table width="100%"  border="0">
    <tbody><tr>

        <td align="justify">
            <p id="title">My Web Page</p>
        </td>
        <td></td>
    </tr>
</tbody></table>

<div  id="inner">
    <div align="center" id="header">

    <p>User Management<p> 

</div>
    <div  id="menu">
    <div align="center">
        <input id="Search" type="button" class="btn" value="Search User" onclick='buttonchange("Search")'/>
    </div><br> <br>
            <div align="center">
        <input id="Save" type="button" class="btn" value="New User" onclick='buttonchange("Save")'/>
    </div><br> <br>
            <div align="center">
        <input id="Delete" type="button" class="btn" value="Delete User" onclick='buttonchange("Delete")'/>
    </div><br> <br>
            <div align="center">
        <input id="edit" type="button" class="btn" value="Edit" />
    </div><br> <br>     <div align="center">
        <input id="save" type="button" class="btn" value="Save" />
    </div><br> <br> 
        <div align="center">
        <input id="clear" type="button" class="btn" value="Clear All"/>
    </div><br> <br>
</div>

<div  id="form">
  <div align="justify" class="search" style="display:table">
<table>
    <tr>
        <td><div id="column">
            Firstname &nbsp;&nbsp;
            </div>
        </td>
         <td><div class="column2" >
             <input id="fname"class="column2" value="" type="text" style="height:30px;"/>

            &nbsp;&nbsp;
            </div> 
        </td>
    </tr> 
    <tr>
        <td><div id="column">
            Lastname &nbsp;&nbsp;
            </div>
        </td>
         <td><div id="column2" >
            <input id="lname" class="column2" value="" type="text" style="height:30px;"/>
            &nbsp;&nbsp;
            </div>
        </td>
    </tr>
    <tr> 
        <td><div id= "column">
        User Role  &nbsp;&nbsp;
        </div>
        </td>  
        <td><div id="column2">
            <select id="role"class="column2"  size="1" style="height:30px;">

              <option selected="selected">User Role</option>
              <option>Super User</option>
              <option>Segment Planner</option>
              <option>Segment Manager</option>
              <option>Finance</option>

              </select>
              &nbsp;&nbsp;
              </div>
        </td>
     </tr> 
     <tr>  
        <td><div id="column" >
        Responsible Area  &nbsp;&nbsp;
        </div>
        </td>
        <td><div id="column2">
            <select id="area" class="column2" size="1" style="height:30px;">

              <option selected="selected">Responsible Area</option></select>
              &nbsp;&nbsp;
              </div>
        </td>

    </tr>
    <tr>  
        <td><div id="column" >

        </div>
        </td>
        <td><div id="column2">

              </div>
        </td>

    </tr><tr>  
        <td><div id="column" >

        </div>
        </td>
        <td><div id="column2">
            <input id="change" type="button" class="btn" value="" style="width:200px;visibility:hidden" />
              </div>
        </td>

    </tr>
</table>



  </div>

</div>
</div>

</body>
</html>

我查看了一些关于堆栈溢出的帖子，发现

minwidth

属性有助于解决这个问题

min width

在一个

元素上对我起了作用，但仍然有少数

元素离开了它们的位置

有人能解释一下在这种情况下发生了什么，以及我如何更改代码以获得所需的行为吗？

由于rep的原因，我无法发表评论，但我查看了您的代码，在当前状态下（制表符），很难通读

看起来您缺少了一些结束div标记。。但我不能百分之百肯定，因为标签

如果您清理代码，可能会更容易提供帮助。

您的#外部是1200px，内部也是1200px，并且有一个边框，与宽度相对应。所以基本上是“把1公升的水倒进一个0.9公升的瓶子里，不要溢出”。

#header{
 width:1200px;
  height:50px;
  background-color:#909090;
    font-family:'Helvetica Neue',sans-serif;
    font-size:25px;
    margin-top: -25px;
   }


#title{
font-family:'Helvetica Neue',sans-serif;
font-size:35px;
color:#09417A;
}

#inner{

 width:1200px;
 height:630px;
 margin-left: 200px;
 border: solid black 1px;
 border-radius:4px;
 min-width:700px;

}
html,
body{
 min-width:700px;
}

.btn {
background: #909090;
padding:8px 13px;
width:200px;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}

#menu{
 position:absolute;
 width:300px;
 height:400px;
 z-index:15;
 top:45%;
 left:25%;
 margin:-100px 0 0 -150px;


}
#column{

width:200px;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
align:center;
height: 45px;
}
.column2{

width:200px;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
align:center;
height: 45px;
border-radius:4px;
}
#form{
 position:absolute;
 width:600px;
 height:400px;
 z-index:15;
 top:45%;
 left:50%;
 margin:-100px 0 0 -150px;
 border: solid black 1px;
 border-radius:4px;

}



.search
{
border-radius: 6px;
padding: 30px; 
width: 500px;
height: 20px;
}
table {
margin: 0 auto;
  }