Table changing div size

This question already has an answer here:

My inline-block elements are not lining up properly 5 answers

---

Try the following:

I have commented out the space between your first and second div and added vertical-align:top to them both. I have also added a missing quote on one of the options for your select

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;

---

fix

<option value=23">23</option>

↓

<option value="23">23</option>

unnecessary comment??

<!!><div class="menu1">

↓

<div class="menu1">

in your css add

float: left;

and your good to go :)

链接地址: http://www.djcxy.com/p/88034.html

上一篇: 数值无法被CSS识别的HTML ID

下一篇: 表更改div大小