在一个容器内对齐 3 个 div 盒子

Question

在页面上： jerkydirect.com/base/opportunity - 容器内有 3 个带有图片的框。但是，这些框不会垂直或水平对齐。如何让所有 3 个盒子都很好地显示在同一行上？

这是代码：

<section class="plan-box opportunity">
<div class="container">
<div class="row">
<h2>Choose Your Crave:</h2>
<div class="col-xs-12 col-sm-12 col-md-12">
<center>
<div class="package">
<h3>Twin Pack</h3>
<p>2 BAGS</p>
<ul>
    <li><span>Affiliate Price: </span><span>$19.75</span></li>
    <li><span>Retail Price:</span><span>$21.75</span></li>
    <li><span>Commission Payout:</span><span>$5.00</span></li>
</ul>
</div>
</center>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
                <div class="package">
                    <h3>family Pack <span></span></h3>
                    <p>4 BAGS</p>
                    <ul>
                        <li><span>Affiliate Price: </span><span>$39.50</span></li>
                        <li><span>Retail Price:</span><span>$41.50</span></li>
                        <li><span>Commission Payout:</span><span>$10</span></li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4">
                <div class="package">
                    <h3>Party Pack <span></span></h3>
                    <p>10 BAGS</p>
                    <ul>
                        <li><span>Affiliate Price: </span><span>$79.75</span></li>
                        <li><span>Retail Price:</span><span>$87.75</span></li>
                        <li><span>Commission Payout:</span><span>$15</span></li>
                    </ul>
                </div>
            </div></div>
</div>
</section>

  [1]: http://jerkydirect.com/base/opportunity

Answer 1

将<div class="col-xs-12 col-sm-12 col-md-12">更改为 <div class="col-xs-12 col-sm-12 col-md-4"> 。这样，您将使所有div彼此平等对齐。