html - Why does foundation some times not size the columns equally? -
i have foundation jsfiddle: http://jsfiddle.net/nycynik/qn8z3cut/2/
and not tic-tac-toe, instead right column flush right, , rest different sizes. expected them have same size.
<body> <div class="wrapper"> <div class="row"> <div class="small-12 medium-4 large-4 columns yellow_gradient"> <h2>1c</h2> <p>rough diamond</p> <hr /> <p>poor performance<br/>high potential</p> </div> <div class="small-12 medium-4 large-4 columns green_gradient"> <h2>1b</h2> <p>future star</p> <hr /> <p>good performance<br/>high potential</p> </div> <div class="small-12 medium-4 large-4 columns green_gradient"> <h2>1a</h2> <p>consistent star</p> <hr /> <p>outstanding performance<br/>high potential</p> </div> </div> <div class="row"> <div class="small-12 medium-4 large-4 columns yellow_gradient"> <h2>2c</h2> <p>inconsistent player</p> <hr /> <p>poor performance<br/>moderate potential (new role)</p> </div> <div class="small-12 medium-4 large-4 columns yellow_gradient"> <h2>2b</h2> <p>key player</p> <hr /> <p>good performance<br/>moderate potential</p> </div> <div class="small-12 medium-4 large-4 columns green_gradient"> <h2>2a</h2> <p>current star</p> <hr /> <p>outstanding performance<br/>moderate potential</p> </div> </div> <div class="row"> <div class="small-12 medium-4 large-4 columns red_gradient"> <h2>3c</h2> <p>talent risk</p> <hr /> <p>poor performance<br/>limited potential</p> </div> <div class="small-12 medium-4 large-4 columns yellow_gradient"> <h2>3b</h2> <p>solid professional</p> <hr /> <p>good performance<br/>moderate potential</p> </div> <div class="small-12 medium-4 large-4 columns yellow_gradient"> <h2>3a</h2> <p>high professional</p> <hr /> <p>outstanding performance<br/>limited potential</p> </div> </div> </div> </body>
the foundation.min.css
stylesheet you're linking not include of column classes, e.g. small-12
or medium-4
.
here updated fiddle linking foundations current cdn stylesheet @ http://cdn.foundation5.zurb.com/foundation.css
Comments
Post a Comment