html - 从页面中删除列会影响对齐

Question

为什么当我从 http://www.shoperb.com/pricing 中删除文章类别时？ (即一个包裹)，列是否不居中回到一起？

相反，删除 1 或 2 会在页面中间创建空白。

如果需要，可提供 PS 样式表。

 <div class='columns pricing-column large-3'>
        <article class='plus'>
          
          <ul class='pricing-table'>
            <li class='title'>
              Plus
            </li>
            <li class='price'>

Answer 1

看起来您正在使用 Zurb Foundation。如果您想要 3 列而不是 4 列，则必须删除整个列(而不仅仅是文章元素)并将现有列的列类从“large-3”更改为“large-4”。

HTML

<section class="prices">
    <div class="row">
        <div class="columns pricing-column large-4">
            <article class="regular">
                <ul class="pricing-table">
                    <li class="title"> Regular </li>
                    <li class="price"> € <span class="js-price" data-price-biennially="22" data-price-monthly="29" data-price-yearly="24"> 29 </span>
                        <div class="month">
                            month
                        </div>
                    </li>
                    <li class="bullet-item first"> 1

                        GB of storage </li>
                    <li class="bullet-item"> 100

                        Products </li>
                    <li class="bullet-item"> 1

                        Staff Accounts </li>
                    <li class="bullet-item"> No Translations </li>
                    <li class="bullet-item"> 2.0%
                        transaction fee </li>
                    <li class="cta-button">
                        <form action="/sign-up" method="POST">
                            <input name="pricing_plan" type="hidden" value="regular">
                            <input class="js-payment-options" name="payment_option" type="hidden" value="price-monthly">
                            <button type="submit"> Start free trial </button>
                        </form>
                    </li>
                </ul>
            </article>
        </div>
        <div class="columns pricing-column large-4">
            <article class="professional">
                <ul class="pricing-table">
                    <li class="title"> Professional </li>
                    <li class="price"> € <span class="js-price" data-price-biennially="112" data-price-monthly="149" data-price-yearly="124"> 149 </span>
                        <div class="month">
                            month
                        </div>
                    </li>
                    <li class="bullet-item first"> 20

                        GB of storage </li>
                    <li class="bullet-item"> 5000

                        Products </li>
                    <li class="bullet-item"> 10

                        Staff Accounts </li>
                    <li class="bullet-item"> 4

                        Translations </li>
                    <li class="bullet-item"> 1.0%
                        transaction fee </li>
                    <li class="cta-button">
                        <form action="/sign-up" method="POST">
                            <input name="pricing_plan" type="hidden" value="professional">
                            <input class="js-payment-options" name="payment_option" type="hidden" value="price-monthly">
                            <button type="submit"> Start free trial </button>
                        </form>
                    </li>
                </ul>
            </article>
        </div>
        <div class="columns pricing-column large-4">
            <article class="enterprise">
                <ul class="pricing-table">
                    <li class="title"> Enterprise </li>
                    <li class="price"> € <span class="js-price" data-price-biennially="262" data-price-monthly="349" data-price-yearly="291"> 349 </span>
                        <div class="month">
                            month
                        </div>
                    </li>
                    <li class="bullet-item first"> 50

                        GB of storage </li>
                    <li class="bullet-item"> 50000

                        Products </li>
                    <li class="bullet-item"> 20

                        Staff Accounts </li>
                    <li class="bullet-item"> 6

                        Translations </li>
                    <li class="bullet-item"> 0.5%
                        transaction fee </li>
                    <li class="cta-button">
                        <form action="/sign-up" method="POST">
                            <input name="pricing_plan" type="hidden" value="enterprise">
                            <input class="js-payment-options" name="payment_option" type="hidden" value="price-monthly">
                            <button type="submit"> Start free trial </button>
                        </form>
                    </li>
                </ul>
            </article>
        </div>
    </div>
</section>

这里是 my CodePen example