Столы CSS3 в Chrome с дочерними элементами DIV

Question

У меня возникают проблемы с столбцами CSS3, они не работают, как я ожидал в Chrome 53.0.2785 - они работают так, как я ожидал в Firefox 49, IE11, EDGE 38,14393

первые два ребенка DIVs моего "контейнера" ​​DIV дисплея под друг друга в Chrome, но рядом друг с другом в Firefox

HTML:

<div class="container"> 
    <div> 
    Some content 1 
    </div> 
    <div> 
    Some content 2 
    </div> 
</div> 

CSS:

* { 
    box-sizing: border-box; 
} 
.container { 
    column-width: 100px; 
    column-gap: 12px; 
} 
.container > div { 
    display: inline-block; 
    width: 100px; 
    border: 1px solid black; 
    padding: 20px; 
} 

Попробуй здесь: https://jsfiddle.net/s7cfbqzt/3/

Теперь, есть несколько странных вещей происходит в Chrome:

• , если я только снять "дисплей: встроенный блок", Chrome разбивает DIVs (даже граница получает распространяемой) - Firefox не

  • Пожалуйста, обратите внимание, что я не могу установить столбец-счетчик в родительском (который в сочетании с удалением инлайн-блок, кажется, добрейшей из-работы), как это предполагается, быть жидким макетом. Высота каждого DIV также динамична, поэтому, если это требование, мне придется написать JS для этого (но я бы предпочел, чтобы это работало без JS).

• если удалить границы определение размера и все свойства дочернего DIVs он работает, как ожидался, но как только я начинаю заполнение внутреннего DIVs с каким-либо другим содержанием (что может иметь границы или Прокладку или коробку-тень), он ломает снова

Если добавить третий ребенок Див

<div>Some content 3</div> 

будут столбцы в Chrome, но отображается как

1..3 
2 

Затем четвертый DIV будет отображаться под DIV3, пятым DIV в первой «строке».

1..3..5 
2..4 

Это ошибка в Chrome или я что-то не так?

Answer 1

Chrome на самом деле, вероятно, один браузер делает это правильно:

https://drafts.csswg.org/css-break/#widows-orphans

Name: orphans, widows 
Value: <integer> 
Initial: 2 

IE 11, EDGE и Firefox (49) нет (? еще) поддержки вдов и сирот, даже хотя http://caniuse.com/#feat=css-widows-orphans утверждает, что IE11 и EDGE поддерживают его - см. https://jsfiddle.net/s7cfbqzt/13/ в IE11 и EDGE. Если IE и EDGE на самом деле будет поддерживать его, они бы установить начальные значения 1 вместо 2.

Fix для моего сценария использования является добавление

orphans: 1; 
widows: 1; 

для контейнерного класса в CSS.

Спасибо @Jay за то, что нашли время, чтобы изучить это!

Answer 2

Вы можете достичь этого, плавая в контейнерах div, вам также нужно будет плавать их контейнер, иначе они не будут отображаться правильно.

* { 
    box-sizing: border-box; 
} 
.container { 
    column-width: 100px; 
    column-gap: 12px; 
float: left; 
} 
.container > div { 
    display: inline-block; 
    width: 100px; 
    border: 1px solid black; 
    padding: 20px; 
float: left; 
} 

РЕДАКТИРОВАТЬ:

то вместо того, чтобы использовать колонки-пробел, я бы применить запас влево к каждому из дивы внутри контейнера. вот так;

.container { 
    width: 100%; 
    float: left; 
    } 
    .container > div { 
     width: 100px; 
     border: 1px solid black; 
     padding: 20px; 
    float: left; 
margin-left: 12px; 
    } 
.container > div:first-child { 
margin-left: 0; 
} 

EDIT:

Если высота не должна совпадать - удалить столбец из ширины контейнера DIV.см https://jsfiddle.net/0sz6t3ft/1/