html - 调整屏幕大小时生成空白

Question

我有一个结构如下的 HTML 文件:

.container-fluid {
  height: 100%;
  width: 100%;
  background: white;
  margin: 0px;
}

.double-panel {
  width: 50%;
  height: 66%;
  background-color: #999;
  float: left;
  min-width: 300px;
  border: thick solid white;
}

.panel {
  width: 50%;
  height: 33%;
  background-color: #555;
  float: left;
  min-width: 300px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: thick solid white;
}

.bord {
  float: right;
  margin: 0;
  padding: 0;
  width: inherit;
  height: 100%;
}

.fields {
  background-color: #ccc;
}

<div class="container-fluid">
  <div id="main" class="double-panel">
    <div class="textbox col-6" id="wwd">
      <h4>WHAT WE DO</h4>
      <button>CURRENT VACANCIES</button>
      <ul>
        <li>Facebook</li>
        <li>LinkedIn</li>
        <li>Twitter</li>
      </ul>
    </div>
  </div>

  <div id="salesrecur" class="panel">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
      <h4></h4>
      <h2></h2>
    </div>
  </div>

  <div class="panel" id="soft">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
      <h4></h4>
      <h2></h2>
    </div>
  </div>
  <div id="salesrecur" class="panel">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
      <h4></h4>
      <h2></h2>
    </div>
  </div>
  <div class="panel" id="soft">
    <div class="col-6 bord"></div>
    <div class="col-6 fields bord">
    </div>
  </div>
</div>

当我将窗口调整为特定大小时，其中一个宽度为 50% 的框被空格向下推，结构丢失。非常奇特的是，它只发生在某些特定尺寸的情况下。

我的问题是为什么会发生这种大小调整，以及如何防止这种情况发生？

Answer 1

那些盒子的宽度实际上超过了50%。在 CSS 中，边框默认在宽度之上计算，因此每个 div 更像是 50% + 10px。

这称为盒子模型。

您可以通过设置更改框模型的工作方式:

box-sizing: border-box;

这将包括宽度集中的填充和边框

注意: 我注意到你在 .panel 上确实有它，在再次阅读你的问题后，它可能是你在面板上设置的最小宽度