Проблема с форматированием большого столбца CSS

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, потому что в данный момент это только поддерживаемый этим браузером, а не другими. Согласно MDN website, column-fill поддерживается Firefox и Chrome; но тогда согласно caniuse.com и W3Schools (я знаю, что людям это не нравится, хотя), эта поддержка доступна только для 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>