html - Issue with Colomn count in CSS -


columns should fill height constraint. working fine in chrome not in ie , firefox.

in ie , firefox distributing evenly instead of taking height of column. have total 16 sub divs, want them come in 5 5 5 1. working fine in chrome (5 5 5 1) not in firefox , ie (4 4 4 4)

here code -

<div class="example">     <div class="example-auto">1a</div>     <div class="example-auto">1b</div>     <div class="example-auto">1c</div>     <div class="example-auto">1d</div>     <div class="example-auto">2a</div>     <div class="example-auto">2b</div>     <div class="example-auto">2c</div>     <div class="example-auto">2d</div>     <div class="example-auto">3a</div>     <div class="example-auto">3b</div>     <div class="example-auto">3c</div>     <div class="example-auto">3d</div>     <div class="example-auto">4a</div>     <div class="example-auto">4a</div>     <div class="example-auto">4a</div>     <div class="example-auto">4a</div> </div> 

css

.example {   -webkit-columns: 4;   -moz-columns: 4;   columns: 4;   height:100px;   border: 1px solid rgba(0, 0, 0, 0.1);   padding: 0 0.5em; }  .example-auto {   -webkit-column-fill: auto;   -moz-column-fill: auto;   column-fill: auto; } 

you need give column-fill: auto; in same class give columns: 4; don't need give in child class.

.example {   -webkit-columns: 4;   -moz-columns: 4;   columns: 4;     height:100px;   border: 1px solid rgba(0, 0, 0, 0.1);   padding: 0 0.5em;    -webkit-column-fill: auto;   -moz-column-fill: auto;   column-fill: auto; } 

you can check example here. http://jsfiddle.net/vijaydhanvai/0r600sg2/


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -