CSS多列div格式问题

Question

我创建了一个多列div，它在Firefox中格式正确，但在Chrome或IE中无法完全正确格式化。当您查看Firefox上的示例时，会显示三列，第一列中最后一项的框架正确结束。当您查看Chrome或IE上的示例时，会显示三列，但第一列中最后一项的框架将在第一列和第二列之间拆分。

是否可以格式化以使所有浏览器正常工作？我正在寻找的解决方案将考虑到项目数量或多或少会有所不同。

以下是代码（and on JSFiddle too）：

#assignAreaTypes { 
  background-color:#FFF;
  border-radius:15px;
  color:#000; 
  padding:20px;
  min-width:400px;
  min-height: 150px;
}
.tierGrp {
  align:center;
  text-align:center;
  font-size:26px;
  background-color:#EEE;
  width:625px;
  min-height:145px;
  height:auto;
  display:block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  padding-top: 3px
    padding-bottom: 3px
}
.areaGrp {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  text-align:left;
}
.areaType {
  margin-bottom:3px;
  font-size:13px;
  padding-bottom: 2px;
}
.eMail {
  font-size: 12px;
  font-family:Georgia, "Times New Roman", Times, serif;
  border:1px solid #3498DB;
  border-radius:5px;
  background:#EDF5FA 50% 50% repeat-x;
  height:auto;
  min-width:100px;
  padding-left:5px;
  padding-right:5px;
}

<div id="assignAreaTypes">
  <form id="userAreaTypes" action="/Admin/updateUsers.php" method="post">
    <a class="b-close ui-state-default ui-corner-all ui-icon ui-iconclosethick"></a>
    <div class="buttonHolder">
      <div align="center"><font size="+3">Test User</font></div>
      <div align="left"><font size="+1">Assigned Tests:</font></div>
      <div class="tierGrp areaGrp">
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="13">Test 01</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="1">Test 02</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="18">Test 03</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="6">Test 04</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="16">Test 05</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="3">Test 06</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="10">Test 07</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="8">Test 08</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="14">Test 09</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="4">Test 10</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="9">Test 11</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="7">Test 12</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="5">Test 13</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="2">Test 14</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="21">Test 15</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="11">Test 16</div></label>
      </div>
    </div> 
  </form>
</div>

Answer 1

有可能column-fill仅适用于Firefox，而不适用于Chrome和IE，因为此时它仅受该浏览器支持，而不受其他浏览器的支持。根据{{​​3}}，Firefox和Chrome支持column-fill;但是根据MDN website和caniuse.com（我知道人们不喜欢这个来源），这种支持仅适用于Firefox，而且只支持部分（或根本没有）适用于Chrome和IE。

您可以使用修复显示的解决方法（有点hacky），似乎可以在Chrome和IE上运行：

• 让div内的label有一个display:inline-block。
• 指定div的宽度为100％的空间。

结果似乎有效，但现在有一些垂直间距有点烦人（您可以通过向label添加一些样式来修复）。代码就像这样：

#assignAreaTypes { 
  background-color:#FFF;
  border-radius:15px;
  color:#000; 
  padding:20px;
  min-width:400px;
  min-height: 150px;
}
.tierGrp {
  text-align:center;
  text-align:center;
  font-size:26px;
  background-color:#EEE;
  width:625px;
  min-height:145px;
  height:auto;
  display:block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  padding-top: 3px
    padding-bottom: 3px
}
.areaGrp {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  text-align:left;
}
.areaType {
  margin-bottom:3px;
  font-size:13px;
  padding-bottom: 2px;
}
.eMail {
  font-size: 12px;
  font-family:Georgia, "Times New Roman", Times, serif;
  border:1px solid #3498DB;
  border-radius:5px;
  background:#EDF5FA 50% 50% repeat-x;
  height:auto;
  min-width:100px;
  padding-left:5px;
  padding-right:5px;
}
.tierGrp label > div {
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}

<div id="assignAreaTypes">
  <form id="userAreaTypes" action="/Admin/updateUsers.php" method="post">
    <a class="b-close ui-state-default ui-corner-all ui-icon ui-iconclosethick"></a>
    <div class="buttonHolder">
      <div align="center"><font size="+3">Test User</font></div>
      <div align="left"><font size="+1">Assigned Tests:</font></div>
      <div class="tierGrp areaGrp">
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="13">Test 01</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="1">Test 02</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="18">Test 03</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="6">Test 04</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="16">Test 05</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="3">Test 06</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="10">Test 07</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="8">Test 08</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="14">Test 09</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="4">Test 10</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="9">Test 11</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="7">Test 12</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="5">Test 13</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="2">Test 14</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="21">Test 15</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="11">Test 16</div></label>
      </div>
    </div> 
  </form>
</div>