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
Post a Comment