几个 <div> 当我还原页面时，元素会移动
[英]few <div> elements move when I restore down the page
问题描述
I am new to HTML and CSS. 
我是HTML和CSS的新手。 My question might be a very simple one but I could not find a solution for it. 我的问题可能很简单，但是我找不到解决方案。 I have tried to develop a simple web page. 我试图开发一个简单的网页。
The screen looks fine when it is maximized but when I try to restore down the page, a few <div> elements move and the screen layout changes completely. 当屏幕最大化时，屏幕看起来不错，但是当我尝试还原页面时，一些<div>元素移动并且屏幕布局完全改变。
Here is the HTML I have used for it. 这是我使用的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
</div>
</td>
<td><div class="column2" >
<input id="fname"class="column2" value="" type="text" style="height:30px;"/>
</div>
</td>
</tr>
<tr>
<td><div id="column">
Lastname
</div>
</td>
<td><div id="column2" >
<input id="lname" class="column2" value="" type="text" style="height:30px;"/>
</div>
</td>
</tr>
<tr>
<td><div id= "column">
User Role
</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>
</div>
</td>
</tr>
<tr>
<td><div id="column" >
Responsible Area
</div>
</td>
<td><div id="column2">
<select id="area" class="column2" size="1" style="height:30px;">
<option selected="selected">Responsible Area</option></select>
</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>
Here is the external CSS I have used. 这是我使用的外部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;
}
I have looked into few of the posts on stack overflow and found that min-width property can help to get over this issue. 我研究了堆栈溢出中的几篇文章，发现min-width属性可以帮助解决此问题。 min-width worked for me on one <div> element but there are still few <div> elements that move away from their position. min-width在一个<div>元素上为我工作，但仍有<div>元素偏离其位置。
Can anyone explain what is happening in this case and how I can change my code to get my desired behaviour? 谁能解释在这种情况下发生了什么以及如何更改代码以获得所需的行为？
1 个解决方案
解决方案1
0 2015-06-08 14:34:21
I cant comment due to rep, but I had a look at your code and in its current state (Tabbing) it is really hard to read through. 由于rep我无法发表评论，但我查看了您的代码，并且在当前状态下（Tabbing）确实很难阅读。
It looks like you have some missing closing div tags.. but i cant be 100% sure due to the tabbing. 看来您有一些缺少的div结束标签..但是由于标签，我无法100％确定。
If you clean up your code it might be easier to help. 如果清理代码，可能会更容易获得帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.