Question

我是HTML和CSS的新手。我的问题可能很简单，但我无法找到解决方案。我试图开发一个简单的网页。

当屏幕最大化时屏幕看起来很好但是当我尝试恢复页面时，会移动一些<div>个元素并且屏幕布局会完全改变。

这是我用过的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>

这是我用过的外部CSS。

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

我已经查看了堆栈溢出的一些帖子，发现min-width属性可以帮助解决这个问题。 min-width在一个<div>元素上为我工作，但仍有少量<div>元素从他们的位置移开。

任何人都可以解释在这种情况下发生了什么，以及如何更改我的代码以获得我想要的行为？

Answer 1

由于代表我不能发表评论，但我看了你的代码并且在当前的状态（Tabbing）中很难通读。

看起来你有一些关闭的div标签......但由于标签，我无法100％确定。

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

我恢复页面

1 个答案: