[英]Aligning 3 div Boxes within a container
在頁面上: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
將您的<div class="col-xs-12 col-sm-12 col-md-12">
更改為<div class="col-xs-12 col-sm-12 col-md-4">
。 這樣,您將使所有div均等對齊。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.