Question

我有一个HTML文件，其结构如下：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

当我将窗口调整到某些尺寸时，其中一个宽度为50％的框被空格向下推，结构丢失。它非常特殊，它只出现在特定的特定尺寸。

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

Answer 1

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

这称为盒子模型。

您可以通过设置：

来更改框模型的工作方式

box-sizing: border-box;

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

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

调整屏幕大小时生成的空白

1 个答案: