Question

我正在尝试学习CSS布局，一切都很顺利。制作了这样的测试布局

到目前为止一切都很好，中间的div高度为60％，黄色的div宽度为60％，绿色的宽度为40％。

但是当我用表格替换黄色div中的表格时，绿色div歪斜并向下移动。我尝试将表格的宽度设置为100％，但仍然没有。

放置表格会为div添加一些隐藏宽度吗？请告诉我如何纠正这个问题。我希望这两个div只能这样放置，采用内联块样式。

我在我的CSS中使用过CSS重置。

＆＃13;

.header {
  background: red;
  height: 10%;
}
.middle {
  background: pink;
  height: 60%;
  width: 100%;
}
.table1 {
  background: orange;
  display: inline-block;
  width: 60%;
  height: 100%;
}
.menu1 {
  background: green;
  display: inline-block;
  width: 40%;
  height: 100%;
}
.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;
}

＆＃13;

<head>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <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>
    </body>
    </html>

＆＃13;

Answer 1

尝试添加以下divs table1和menu1：的垂直对齐：顶部;

Answer 2

修复

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

↓

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

不必要的评论??

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

↓

<div class="menu1">

在你的CSS添加

float: left;

你的好处：）

Answer 3

尝试以下方法：

我已经注释掉了你的第一个和第二个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>

请注意，通过给你的div设定一个高度，你将在较小的屏幕上打破布局

表改变div大小

3 个答案: