div用了浮动，且使用百分比，浏览器缩放布局就乱了，小白一个求大神，挺急的

Question

questionnaire.css
body {
/* 这里相对于css文件 /
/ background-image: url(../images/3b77dc0bbd41ef396690eb32a9803998[1].jpg); */
background-color: #E8F2FE;
width: 100%;
height: 100%;
}

font {
font-family: "楷体";/* Trebuchet MS /
}
/ 整个表单作为一个outer*/
.StuQuestionnaire_outer {
position: relative;
/* height: 100%; /
width: 100%;
left: 2%;
background-color: #E8F2FE;
/ border: 1px red solid; /
}
/ 尊敬的女士...开始 /
.StuQuestionnaire_top {
/ border: 1px black solid; /
/ position: absolute; /
float: left;
width: 90%;
height: 10%;
border-bottom: 1px #EFEFEF dashed;
margin-top: 2%;
margin-left: 2%;
padding: 1%;
}
/ 尊敬的女士...结束 /
/***************************/
/* 表单内容开始...开始 /
.StuQuestionnaire_content {
/ position: absolute; /
float: left;
margin-top: 0%;
margin-left: 2%;
padding: 1%;
width: 90%;
/ border: 1px blue solid; /
}
/ 表单内容开始...结束 /
/***************************/
/* 一、个人就业信息...开始*/
.StuQuestionnaire_content1_top {
float: left;
/* border: 1px yellow solid; /
width: 100%;
}
/ 一、个人就业信息...结束*/
/****************************/
/* 一、个人就业信息问卷内容...开始*/
.StuQuestionnaire_content1_bottom {
width: 80%;
/* border: 1px black solid; /
float: left;
padding: 1%;
margin-left: 11%;
}
/ 一、个人就业信息问卷内容...结束*/
/****************************/
/* 一、个人就业信息问卷内容的每一条...开始*/
.StuQuestionnaire_content1_bottom_div {
width: 90%;
float: left;
padding-left: 1%;
/* padding-top: 1%; /
padding-bottom: 1%;
/ border: 1px blue solid; */
}

.StuQuestionnaire_content1_bottom_div:HOVER {
background-color: #EDFAFE;
} /* 一、个人就业信息问卷内容的每一条...结束*/
/****************************/
/* 一、个人就业信息问卷内容的每一条的标题...开始*/
.StuQuestionnaire_content1_bottom_div_title {
float: left;
/* border: 1px red solid; /
width: 20%;
}
/ 一、个人就业信息问卷内容的每一条的标题...开始*/
/****************************/
/* 一、个人就业信息问卷内容的每一条的input...开始*/
.StuQuestionnaire_content1_bottom_div_input {
width: 40%;
float: left;
}

/* 一、个人就业信息问卷内容的每一条的input...结束*/
/****************************/
/* 一、个人就业信息问卷内容的每一条的text...开始*/
.StuQuestionnaire_content1_bottom_div_text {
width: 100%;
/* color: #A79776; /
}
/ 一、个人就业信息问卷内容的每一条的text...结束*/
/****************************/
/* 一、个人就业信息问卷内容的控制信息的图片div..开始 */
.imgDiv {
float: left;
height: 2.5%;
width: 2%;
visibility: hidden;
margin-left: 1%;
}

.imgDiv img {
height: 100%;
background: transparent; /*完全透明*/
opacity: 1; /*整个按钮的不透明度，会影响到文字，0完全透明，1完全不透明*/
background: rgba(255, 255, 255, 0.5);
}
/* 一、个人就业信息问卷内容的控制信息的图片div..结束 /
.controlMessages {
float: left;
height: 2.5%;
margin-left: 0.5%;
}
/***************************/
/* 二、工作满意度..开始*/
.StuQuestionnaire_content2_top {
float: left;
/* border: 1px yellow solid; /
width: 100%;
}
/ 二、工作满意度..结束*/
/****************************/
/* 二、工作满意度答卷内容...开始*/
.StuQuestionnaire_content2_bottom {
width: 98%;
/* border: 1px black solid; /
float: left;
padding: 1%;
}
/ 二、工作满意度答卷内容...结束*/
/****************************/
/* 二、工作满意度答卷内容的每一条...开始*/
.StuQuestionnaire_content2_bottom_div {
width: 80%;
float: left;
padding-left: 1%;
/* padding-top: 1%; /
padding-bottom: 1%;
/ border: 1px red solid; /
border-bottom: 10% red solid;
/ border-bottom: 10%;
border-bottom-width: 80%;
border-bottom-color: black; */
margin-left: 10%;
}

.StuQuestionnaire_content2_bottom_div:HOVER {
background-color: #EDFAFE; /* #EDFAFE*/
}
/* 二、工作满意度答卷内容的每一条...结束*/
/****************************/
/* 二、工作满意度答卷内容的每一条的标题...开始*/
.StuQuestionnaire_content2_bottom_div_title {
float: left;
width: 80%;
/* border: 1px red solid; /
margin-left: 1%;
}
/ 二、工作满意度答卷内容的每一条的标题...开始*/
/****************************/
/* 二、工作满意度答卷内容的每一条的input...开始*/
.StuQuestionnaire_content2_bottom_div_input {
width: 78%;
float: left;
/* border: 1px black solid; /
padding: 1%;
margin-left: 1%;
}
/ 二、工作满意度答卷内容的每一条的input...结束*/
/****************************/
/* 二、工作满意度答卷内容的每一条的input的每个选项...开始*/
.StuQuestionnaire_content2_bottom_input_choose {
width: 95%;
float: left;
/* border: 1px red solid; */
margin-bottom: 1%;
margin-left: 1%;
}

.StuQuestionnaire_content2_bottom_input_choose:HOVER {
background-color: #EFEFEF;
cursor: pointer;
}
/* 二、工作满意度答卷内容的每一条的input的每个选项...开始*/
.StuQuestionnaire_content2_bottom_input_choose input {
width: 3%;
height: 2.5%;
float: left;
/* border-radius: 100%; */
-webkit-box-shadow: 0% 18% 30% rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0% 18% 30% rgba(0, 0, 0, 0.5);
box-shadow: 0% 18% 30% rgba(0, 0, 0, 0.5);
background: #ddd;
}

.StuQuestionnaire_content2_bottom_input_choose label {
float: left;
margin-left: 0.5%;
}
/**设置红色字体**/
.redFont {
color: red;
}

.StuQuestionnaire_content2_bottom_submit {
width: 80%;
float: left;
padding-left: 1%;
/* padding-top: 1%; /
padding-bottom: 1%;
/ border: 1px red solid; */
margin-left: 10%;
}

.StuQuestionnaire_content2_bottom_div_submit {
width: 78%;
float: left;
padding: 1%;
margin-left: 1%;
}

.StuQuestionnaire_content2_bottom_div_submit input {
background-color: #DEDEDD;
float: left;
height: 30px;
width: 8%;
margin-left: 40%;
}

.StuQuestionnaire_content2_bottom_div_submit input:HOVER {
cursor: pointer;
position: relative;
-webkit-animation-name: buzz-out;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
top: 2%;
margin-left: 40.5%;
margin-top: 0.5%;
}

.StuQuestionnaire_content2_bottom_div_submit input:AFTER {
cursor: pointer;
position: relative;
top: 0%;
left: 0%;
}

Answer 1

 system("cls");