css - Css3 div layout with column count -
i layout divs in columns of 3. using column count this. have set wrapper size 1000x300px, should fit 3x5 divs. div spread out of wrapper , not fit inside?
<div id="wrapper"> <div class="box">0</div> <div class="box">1</div> <div class="box">2</div> ... </div>
https://jsfiddle.net/nhmu3ws0/
edit:
i want achieve layout divs:
1 4 7 ... 2 5 8 3 6 9
answer:
i needed this:
display: flex; flex-direction: column; flex-wrap: wrap;
edit
so, achieve layout have described in updated question, need remove column-count
properties, restrict columns three.
to have unlimited number of columns 3 100px high divs in each one, constrain height of parent 3 × 100px i.e. 300px , define column-width
property.
example: https://jsfiddle.net/nhmu3ws0/2/
because columns repeat beyond containing parent element if not fit within bounds of parent.
in fiddle, have defined height of wrapper element being 300px. fiddle has 15 divs within wrapper. cannot fit 15 × 100px divs within parent of 300px height.
the parent needs high enough accommodate total height of combined divs divided number of columns. so, in case of fiddle, parent needs 500px in height (that's (15 × 100) / 3).
html:
<div id="wrapper"> <div class="box">0</div> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> <div class="box">10</div> <div class="box">11</div> <div class="box">12</div> <div class="box">13</div> <div class="box">14</div> </div>
css:
#wrapper { position: absolute; width: 1000px; height: 500px; background: green; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; } .box { width: 200px; height: 100px; background: red; font-size: 30px; color: #fff; }
Comments
Post a Comment