为什么基金会有时不平等地调整列的大小？

Question

我有这个基础 JSFiddle：http://jsfiddle.net/nycynik/qn8z3cut/2/

而且它看起来不像井字游戏，而是右边的列是齐平的，其余的都是不同的大小。我希望它们都具有相同的大小。

<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>

Answer 1

您链接到的 foundation.min.css 样式表不包含任何列类，例如small-12 或 medium-4.

这是一个updated fiddle linking to Foundations current CDN stylesheet at http://cdn.foundation5.zurb.com/foundation.css

为什么基金会有时不平等地调整列的大小？

Why does foundation some times not size the columns equally?

html

css

zurb-foundation