表更改div大小
这个问题在这里已经有了答案：
尝试以下操作：
我已经注意到你的第一个和第二个div之间的空间，并向他们添加了vertical-align：top。 我还在您选择的其中一个选项中添加了缺失的报价
html,
body {
height: 100%;
}
.header {
background: red;
height: 10%;
}
.middle {
background: pink;
height: 60%;
width: 100%;
}
.table1 {
background: orange;
display: inline-block;
width: 60%;
height: 100%;
vertical-align: top;
}
.menu1 {
background: green;
display: inline-block;
width: 40%;
height: 100%;
vertical-align: top;
}
.table_container {
width: 100%;
}
.bottom {
background: black;
height: 30%;
}
label {
display: block;
}
iframe {
width: 100%;
height: 100%;
}
table {
margin-top: 20px;
width: 80%;
}
table,
th,
td {
border: 1px solid #cecfd5;
padding: 10px 15px;
}<div class="header">heelo
</div>
<div class="middle">
<div class="table1">
<table>
<tr>
<td>name</td>
<td>email</td>
<td>age</td>
</tr>
<tr>
<td>person</td>
<td>person93person@gmail.com</td>
<td>22</td>
</tr>
<tr>
<td>person</td>
<td>person93person@gmail.com</td>
<td>23</td>
</tr>
<tr>
<td>person</td>
<td>person93person@gmail.com</td>
<td>22</td>
</tr>
<tr>
<td>person</td>
<td>person93person@gmail.com</td>
<td>22</td>
</tr>
</table>
</div><!--
--><div class="menu1">
<form action="#">
<label>username</label>
<input type="text">
<label>password</label>
<input type="text">
<label>age</label>
<select>
<option value="22">22</option>
<option value="23">23</option>
</select>
<label>Click here to submit</label>
<input type="submit ">
</form>
</div>
</div>
<div class="bottom ">
<iframe src=" ">
<p>Your browser does not support iframes.</p>
</div>尝试添加到divs table1和menu1以下内容： vertical-align：top;
固定
<option value=23">23</option>
↓
<option value="23">23</option>
不必要的评论
<!!><div class="menu1">
↓
<div class="menu1">
在你的CSS添加
float: left;
和你的好去:)
链接地址: http://www.djcxy.com/p/88033.html