CSS - div出现在主容器外面

时间：2017-12-20 10:01:39

标签： jquery html css twitter-bootstrap

我使用bootstrap设计了一个定价表。除了一个问题，一切都很好。也就是说，定价表没有出现在“。pricing-table-wrp”容器中。它出现在容器外面。如果我将固定宽度给予“。flipcontainer”容器只有它可以工作，但我面临着手机上的响应问题＆amp;标签。所以，我想将定价表放在pricing-table-wrp容器中，而不给元素赋予固定的高度。请帮我。先感谢您。请在全屏幕中查看小提琴。更多详情：https://html.paperindex.com/boost-your-sales.html 

$(document).ready(function() {
  $(".flip").on("click", function() {
    $(this).addClass("btn-active");
    $(".flipreverse").removeClass("btn-active");
    $('.card').removeClass('flipped');
  })
  $(".flipreverse").on("click", function() {
    $(this).addClass("btn-active");
    $(".flip").removeClass("btn-active");
    $('.card').addClass('flipped');
  })
})
/*boost-your-sales-new*/

.bst-ur-sls-tgle-btn-wrp button {
  width: 200px;
  border: none;
  outline: none;
  font-size: 20px;
}

.bst-ur-sls-tgle-btn-wrp button:hover,
.bst-ur-sls-tgle-btn-wrp button {
  /*background: #fff;*/
  box-shadow: none;
  outline: none;
  background-color: #fff;
  border-radius: 25px;
}

.bst-yr-sls-nav {
  border: 2px solid #1e6c97;
  border-radius: 50px;
  max-width: 448px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.pricing-table-wrp {
  background: #F1F7FB;
  padding: 60px 0;
}

.btn-active {
  background: #ffcc29 !important;
  transition: all 1s ease out;
  border-radius: 25px;
}

.bst-ur-sls-tgle-btn-wrp button:first-child {
  margin-left: 10px;
}

.bst-ur-sls-tgle-btn-wrp .navbar-btn:active,
.bst-ur-sls-tgle-btn-wrp .navbar-btn:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none;
}

.flipcontainer {
  width: 100%;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card>div {
  display: block;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.frnt-img i,
.bck-img i {
  font-size: 80px;
  color: #ffcc29;
}

.pricing-tbl>tbody>tr>td {
  padding-top: 17px;
  padding-bottom: 17px;
}

.pricing-tbl>tbody>tr>td:first-child {
  text-align: left;
  padding-left: 30px;
}

.pricing-tbl>tbody>tr>td:last-child a {
  color: #fff;
}

.pricing-tbl>tbody>tr>td:last-child {
  padding-right: 30px;
  text-align: right;
}

.pricing-tbl>tbody>tr:last-child>td {
  border-bottom: 1px solid #ccc;
}

.subsribe-btn-wrp {
  text-align: center;
  margin-top: 50px;
}

.frnt-img,
.bck-img {
  padding: 50px;
  padding-bottom: 4px;
}

.card .front {
  background: #fff;
  border-radius: 10px;
  color: #555;
}

.price i {
  font-size: 16px;
  vertical-align: super;
}

.price {
  word-spacing: -6px;
  margin-bottom: 0;
}

.price sup {
  font-size: 14px;
  vertical-align: super;
}

.card .back {
  background: #fff;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  border-radius: 10px;
  color: #555;
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.flip-cards {
  margin-top: 40px;
}


/*boost-your-sales-new-ends*/

.boost-your-sales-bnr-content-wrap {
  color: #fff;
  min-height: 24.29rem;
  position: relative;
  padding: 1.429rem;
}

.boost-your-sales-bnr-content-wrap>h1,
.boost-your-sales-bnr-content-wrap>h2 {
  margin: 0;
  color: #fff;
  font-size: 2.5rem;
  text-align: center;
  margin-top: 2.286rem;
  margin-bottom: 0;
}

.boost-your-sales-bnr-content-wrap>h2 {
  color: #ffcc29;
}

.boost-your-sales-bnr-content-wrap>h3 {
  text-align: center;
  font-size: 2.286rem;
  font-family: "Montserrat";
  font-weight: normal;
}

.budiness-promotion-title>h2 {
  text-align: center;
  background: #1e6c97;
  margin: 0;
  padding: 1.429rem;
  font-size: 2.286rem;
  color: #fff;
}

.budiness-promotion-subtitle>h2 {
  text-align: center;
  font-size: 2rem;
  margin-top: 2.5rem;
  margin-left: 1.07rem;
  margin-right: 1.07rem;
}

.budiness-promotion-wrap {
  border: 1px solid #B8C0C5;
  border-top: none;
}

.membership-imgs {
  padding: 2.143rem;
  margin-top: 2.143rem;
}

.budiness-promotion-wrap+.container-fluid h4 {
  text-align: center;
  margin-top: 2.143rem;
  margin-bottom: 2.143rem;
  font-size: 1.714rem;
  color: #505253;
}

.plan-for-your-business {
  background: #F5FAFC;
}

.plan-for-your-business a {
  white-space: normal !important;
}

.plan-for-your-business h2 {
  font-size: 2rem;
  color: #505253;
  margin-bottom: 4.286rem;
  margin-top: 2.143rem;
}

.plan-for-ur-business-title {
  background: #E0F1FA;
  padding: 1.071rem;
  min-height: 4.714rem;
}

.plan-for-ur-business-title>h4 {
  text-align: center;
  font-size: 1.214rem;
  margin: 0;
}

.plan-for-ur-business-title>p {
  text-align: center;
  margin-bottom: 0;
}

.plan-for-ur-business-title>h3 {
  margin: 0;
  padding: 1.07rem;
  font-size: 1.429rem;
  color: #505253;
}

.plan-for-ur-business-subhead {
  padding: 1.07rem;
  border-left: 4px solid #1e6c97;
}

.plan-for-your-business-content {
  background: #fff;
}

.plan-for-your-business-content p {
  margin: 0 1.07rem;
  padding: 1.714rem 0;
  border-bottom: 1px solid #ccc;
}

.plan-for-your-business-content p:last-child {
  border-bottom: none;
}


/*.popover { 
    background: #1e6c97; 
    color:#fff;
    width: 100%;
    max-width:500px; 
}
.popover.right>.arrow:after {
    border-right-color: #1e6c97;
}*/

.pi-popover,
.inbox-popover {
  color: #1E6C97;
}

.pi-popover+.popover,
.inbox-popover+.popover {
  background: #fff;
  color: #000;
  max-width: 500px;
  border: 2px solid #1E6C97;
}

.pi-popover+.popover {
  width: 100%;
}

.inbox-popover+.popover {
  width: 500px;
}

.pi-popover+.popover.right>.arrow,
.inbox-popover+.popover.right>.arrow {
  border-right-color: #1E6C97;
}

.pi-popover+.popover.right>.arrow:after,
.inbox-popover+.popover.right>.arrow:after {
  border-right-color: #fff;
  left: 2px;
}

.quaranty-img {
  max-width: 100%;
  height: 100%;
  position: absolute;
  right: 1.214rem;
  bottom: 2.571rem;
}

.honest-pricing {
  margin: 2.143rem 1.07rem;
}

.membership-separator {
  border-right: 1px solid #ccc;
}

.bosst-your-sales-logo-wrap {
  margin-bottom: 0;
  background: #000;
  border: none;
  border-radius: 0;
}

.boost-your-sales-bottom-wrap>p {
  text-align: center;
  padding: 1.429rem 1rem;
  background: #fff;
  margin-bottom: 0;
  font-size: 1.143rem;
}

.boost-your-sales-bottom {
  display: inline-block;
}

.boost-your-sales-bottom p {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="pricing-table-wrp">
  <div class="container-fluid">
    <div class="text-center">
      <h2 class="mrgn-top-0" data-original-title="" title="">Black Friday plans &amp; pricing</h2>
      <h5>Get the package of 4 SEO tools with 30% LIFETIME discount now!</h5>
      <nav class="navbar navbar-default bst-yr-sls-nav">
        <div class="container-fluid">
          <div class="navbar-header bst-ur-sls-tgle-btn-wrp">
            <button class="btn navbar-btn flip"><b>Annual</b> <small>Save ~ 40%</small></button> <button class="btn navbar-btn flipreverse btn-active">Monthly</button>
          </div>
        </div>
      </nav>
      <div class="row flip-cards">
        <div class="col-xs-4 col-sm-4">
          <section class="flipcontainer flip-section1">
            <div class="card flipped">
              <div class="front">
                <div class="frnt-img">
                  <i aria-hidden="true" class="fa fa-hourglass-start"></i>
                </div>
                <h3>mangools <span class="clr-gold">Basic</span></h3>
                <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
                <p class="fnt-8 text-center">per month</p>
                <table class="table pricing-tbl mrgn-top-30">
                  <tbody>
                    <tr>
                      <td>Keyword research</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                        <p>Keyword suggestions per search</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p>200</p>
                      </td>
                    </tr>
                    <tr>
                      <td>SERP analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                    </tr>
                  </tbody>
                </table>
                <div class="subsribe-btn-wrp">
                  <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
                </div>
              </div>
              <div class="back">
                <div class="frnt-img">
                  <i aria-hidden="true" class="fa fa-hourglass-start"></i>
                </div>
                <h3>mangools <span class="clr-gold">Basic</span></h3>
                <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
                <p class="fnt-8 text-center">per month</p>
                <table class="table pricing-tbl mrgn-top-30">
                  <tbody>
                    <tr>
                      <td>Keyword research</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                        <p>Keyword suggestions per search</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p>200</p>
                      </td>
                    </tr>
                    <tr>
                      <td>SERP analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                    </tr>
                  </tbody>
                </table>
                <div class="subsribe-btn-wrp">
                  <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
                </div>
              </div>
            </div>
          </section>
        </div>
        <div class="col-xs-4 col-sm-4">
          <section class="flipcontainer flip-section2">
            <div class="card flipped">
              <div class="front">
                <div class="frnt-img">
                  <i aria-hidden="true" class="fa fa-hourglass-start"></i>
                </div>
                <h3>mangools <span class="clr-gold">Basic</span></h3>
                <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
                <p class="fnt-8 text-center">per month</p>
                <table class="table pricing-tbl mrgn-top-30">
                  <tbody>
                    <tr>
                      <td>Keyword research</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                        <p>Keyword suggestions per search</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p>200</p>
                      </td>
                    </tr>
                    <tr>
                      <td>SERP analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                    </tr>
                  </tbody>
                </table>
                <div class="subsribe-btn-wrp">
                  <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
                </div>
              </div>
              <div class="back">
                <div class="frnt-img">
                  <i aria-hidden="true" class="fa fa-hourglass-start"></i>
                </div>
                <h3>mangools <span class="clr-gold">Basic</span></h3>
                <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
                <p class="fnt-8 text-center">per month</p>
                <table class="table pricing-tbl mrgn-top-30">
                  <tbody>
                    <tr>
                      <td>Keyword research</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                        <p>Keyword suggestions per search</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p>200</p>
                      </td>
                    </tr>
                    <tr>
                      <td>SERP analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p>SERP lookups per 24 hours *</p>
                      </td>
                      <td>
                        <p>100</p>
                      </td>
                    </tr>
                    <tr>
                      <td>Rank tracking</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">Tracked keywords</p>
                        <p class="mrgn-btm-20">Tracked domains</p>
                        <p>Rank updates</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p class="mrgn-btm-20">Unlimited</p>
                        <p>Daily</p>
                      </td>
                    </tr>
                    <tr>
                      <td>Backlink analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td>
                    </tr>
                  </tbody>
                </table>
                <div class="subsribe-btn-wrp">
                  <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
                </div>
              </div>
            </div>
          </section>
        </div>
        <div class="col-xs-4 col-sm-4">
          <section class="flipcontainer flip-section3">
            <div class="card flipped">
              <div class="front">
                <div class="frnt-img">
                  <i aria-hidden="true" class="fa fa-hourglass-start"></i>
                </div>
                <h3>mangools <span class="clr-gold">Basic</span></h3>
                <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
                <p class="fnt-8 text-center">per month</p>
                <table class="table pricing-tbl mrgn-top-30">
                  <tbody>
                    <tr>
                      <td>Keyword research</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                        <p>Keyword suggestions per search</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p>200</p>
                      </td>
                    </tr>
                    <tr>
                      <td>SERP analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p>SERP lookups per 24 hours *</p>
                      </td>
                      <td>
                        <p>100</p>
                      </td>
                    </tr>
                    <tr>
                      <td>Rank tracking</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">Tracked keywords</p>
                        <p class="mrgn-btm-20">Tracked domains</p>
                        <p>Rank updates</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p class="mrgn-btm-20">Unlimited</p>
                        <p>Daily</p>
                      </td>
                    </tr>
                    <tr>
                      <td>Backlink analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td>
                    </tr>
                  </tbody>
                </table>
                <div class="subsribe-btn-wrp">
                  <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
                </div>
              </div>
              <div class="back">
                <div class="frnt-img">
                  <i aria-hidden="true" class="fa fa-hourglass-start"></i>
                </div>
                <h3>mangools <span class="clr-gold">Basic</span></h3>
                <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
                <p class="fnt-8 text-center">per month</p>
                <table class="table pricing-tbl mrgn-top-30">
                  <tbody>
                    <tr>
                      <td>Keyword research</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                        <p>Keyword suggestions per search</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p>200</p>
                      </td>
                    </tr>
                    <tr>
                      <td>SERP analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p>SERP lookups per 24 hours *</p>
                      </td>
                      <td>
                        <p>100</p>
                      </td>
                    </tr>
                    <tr>
                      <td>Rank tracking</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mrgn-btm-20">Tracked keywords</p>
                        <p class="mrgn-btm-20">Tracked domains</p>
                        <p>Rank updates</p>
                      </td>
                      <td>
                        <p class="mrgn-btm-20">100</p>
                        <p class="mrgn-btm-20">Unlimited</p>
                        <p>Daily</p>
                      </td>
                    </tr>
                    <tr>
                      <td>Backlink analysis</td>
                      <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td>
                    </tr>
                  </tbody>
                </table>
                <div class="subsribe-btn-wrp">
                  <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

问题在于，您的所有元素都是absolute位置，因此给父母提供0高度，而您可以保留前面 position:relative而只保留position:absolute在返回（然后根据需要调整剩余的CSS）：

$(document).ready(function() {
  $(".flip").on("click", function() {
    $(this).addClass("btn-active");
    $(".flipreverse").removeClass("btn-active");
    $('.card').removeClass('flipped');
  })
  $(".flipreverse").on("click", function() {
    $(this).addClass("btn-active");
    $(".flip").removeClass("btn-active");
    $('.card').addClass('flipped');
  })
})
/*boost-your-sales-new*/

.bst-ur-sls-tgle-btn-wrp button {
  width: 200px;
  border: none;
  outline: none;
  font-size: 20px;
}

.bst-ur-sls-tgle-btn-wrp button:hover,
.bst-ur-sls-tgle-btn-wrp button {
  /*background: #fff;*/
  box-shadow: none;
  outline: none;
  background-color: #fff;
  border-radius: 25px;
}

.bst-yr-sls-nav {
  border: 2px solid #1e6c97;
  border-radius: 50px;
  max-width: 448px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.pricing-table-wrp {
  background: #F1F7FB;
  padding: 60px 0;
}

.btn-active {
  background: #ffcc29 !important;
  transition: all 1s ease out;
  border-radius: 25px;
}

.bst-ur-sls-tgle-btn-wrp button:first-child {
  margin-left: 10px;
}

.bst-ur-sls-tgle-btn-wrp .navbar-btn:active,
.bst-ur-sls-tgle-btn-wrp .navbar-btn:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none;
}

.flipcontainer {
  width: 100%;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card>div {
  display: block;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.frnt-img i,
.bck-img i {
  font-size: 80px;
  color: #ffcc29;
}

.pricing-tbl>tbody>tr>td {
  padding-top: 17px;
  padding-bottom: 17px;
}

.pricing-tbl>tbody>tr>td:first-child {
  text-align: left;
  padding-left: 30px;
}

.pricing-tbl>tbody>tr>td:last-child a {
  color: #fff;
}

.pricing-tbl>tbody>tr>td:last-child {
  padding-right: 30px;
  text-align: right;
}

.pricing-tbl>tbody>tr:last-child>td {
  border-bottom: 1px solid #ccc;
}

.subsribe-btn-wrp {
  text-align: center;
  margin-top: 50px;
}

.frnt-img,
.bck-img {
  padding: 50px;
  padding-bottom: 4px;
}

.card .front {
  background: #fff;
  border-radius: 10px;
  color: #555;
  position:relative;
}

.price i {
  font-size: 16px;
  vertical-align: super;
}

.price {
  word-spacing: -6px;
  margin-bottom: 0;
}

.price sup {
  font-size: 14px;
  vertical-align: super;
}

.card .back {
  background: #fff;
  top:0;
  text-align:center;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  border-radius: 10px;
  color: #555;
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.flip-cards {
  margin-top: 40px;
}


/*boost-your-sales-new-ends*/

.boost-your-sales-bnr-content-wrap {
  color: #fff;
  min-height: 24.29rem;
  position: relative;
  padding: 1.429rem;
}

.boost-your-sales-bnr-content-wrap>h1,
.boost-your-sales-bnr-content-wrap>h2 {
  margin: 0;
  color: #fff;
  font-size: 2.5rem;
  text-align: center;
  margin-top: 2.286rem;
  margin-bottom: 0;
}

.boost-your-sales-bnr-content-wrap>h2 {
  color: #ffcc29;
}

.boost-your-sales-bnr-content-wrap>h3 {
  text-align: center;
  font-size: 2.286rem;
  font-family: "Montserrat";
  font-weight: normal;
}

.budiness-promotion-title>h2 {
  text-align: center;
  background: #1e6c97;
  margin: 0;
  padding: 1.429rem;
  font-size: 2.286rem;
  color: #fff;
}

.budiness-promotion-subtitle>h2 {
  text-align: center;
  font-size: 2rem;
  margin-top: 2.5rem;
  margin-left: 1.07rem;
  margin-right: 1.07rem;
}

.budiness-promotion-wrap {
  border: 1px solid #B8C0C5;
  border-top: none;
}

.membership-imgs {
  padding: 2.143rem;
  margin-top: 2.143rem;
}

.budiness-promotion-wrap+.container-fluid h4 {
  text-align: center;
  margin-top: 2.143rem;
  margin-bottom: 2.143rem;
  font-size: 1.714rem;
  color: #505253;
}

.plan-for-your-business {
  background: #F5FAFC;
}

.plan-for-your-business a {
  white-space: normal !important;
}

.plan-for-your-business h2 {
  font-size: 2rem;
  color: #505253;
  margin-bottom: 4.286rem;
  margin-top: 2.143rem;
}

.plan-for-ur-business-title {
  background: #E0F1FA;
  padding: 1.071rem;
  min-height: 4.714rem;
}

.plan-for-ur-business-title>h4 {
  text-align: center;
  font-size: 1.214rem;
  margin: 0;
}

.plan-for-ur-business-title>p {
  text-align: center;
  margin-bottom: 0;
}

.plan-for-ur-business-title>h3 {
  margin: 0;
  padding: 1.07rem;
  font-size: 1.429rem;
  color: #505253;
}

.plan-for-ur-business-subhead {
  padding: 1.07rem;
  border-left: 4px solid #1e6c97;
}

.plan-for-your-business-content {
  background: #fff;
}

.plan-for-your-business-content p {
  margin: 0 1.07rem;
  padding: 1.714rem 0;
  border-bottom: 1px solid #ccc;
}

.plan-for-your-business-content p:last-child {
  border-bottom: none;
}


/*.popover { 
    background: #1e6c97; 
    color:#fff;
    width: 100%;
    max-width:500px; 
}
.popover.right>.arrow:after {
    border-right-color: #1e6c97;
}*/

.pi-popover,
.inbox-popover {
  color: #1E6C97;
}

.pi-popover+.popover,
.inbox-popover+.popover {
  background: #fff;
  color: #000;
  max-width: 500px;
  border: 2px solid #1E6C97;
}

.pi-popover+.popover {
  width: 100%;
}

.inbox-popover+.popover {
  width: 500px;
}

.pi-popover+.popover.right>.arrow,
.inbox-popover+.popover.right>.arrow {
  border-right-color: #1E6C97;
}

.pi-popover+.popover.right>.arrow:after,
.inbox-popover+.popover.right>.arrow:after {
  border-right-color: #fff;
  left: 2px;
}

.quaranty-img {
  max-width: 100%;
  height: 100%;
  position: absolute;
  right: 1.214rem;
  bottom: 2.571rem;
}

.honest-pricing {
  margin: 2.143rem 1.07rem;
}

.membership-separator {
  border-right: 1px solid #ccc;
}

.bosst-your-sales-logo-wrap {
  margin-bottom: 0;
  background: #000;
  border: none;
  border-radius: 0;
}

.boost-your-sales-bottom-wrap>p {
  text-align: center;
  padding: 1.429rem 1rem;
  background: #fff;
  margin-bottom: 0;
  font-size: 1.143rem;
}

.boost-your-sales-bottom {
  display: inline-block;
}

.boost-your-sales-bottom p {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="pricing-table-wrp">
  <div class="container-fluid">
    <div class="text-center">
      <h2 class="mrgn-top-0" data-original-title="" title="">Black Friday plans &amp; pricing</h2>
      <h5>Get the package of 4 SEO tools with 30% LIFETIME discount now!</h5>
      <nav class="navbar navbar-default bst-yr-sls-nav">
        <div class="container-fluid">
          <div class="navbar-header bst-ur-sls-tgle-btn-wrp">
            <button class="btn navbar-btn flip"><b>Annual</b> <small>Save ~ 40%</small></button> <button class="btn navbar-btn flipreverse btn-active">Monthly</button>
          </div>
        </div>
      </nav>
    </div>
    <div class="row flip-cards">
      <div class="col-xs-4 col-sm-4">
        <section class="flipcontainer flip-section1">
          <div class="card flipped">
            <div class="front">
              <div class="frnt-img">
                <i aria-hidden="true" class="fa fa-hourglass-start"></i>
              </div>
              <h3>mangools <span class="clr-gold">Basic</span></h3>
              <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
              <p class="fnt-8 text-center">per month</p>
              <table class="table pricing-tbl mrgn-top-30">
                <tbody>
                  <tr>
                    <td>Keyword research</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                      <p>Keyword suggestions per search</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p>200</p>
                    </td>
                  </tr>
                  <tr>
                    <td>SERP analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                  </tr>
                </tbody>
              </table>
              <div class="subsribe-btn-wrp">
                <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
            <div class="back">
              <div class="frnt-img">
                <i aria-hidden="true" class="fa fa-hourglass-start"></i>
              </div>
              <h3>mangools <span class="clr-gold">Basic</span></h3>
              <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
              <p class="fnt-8 text-center">per month</p>
              <table class="table pricing-tbl mrgn-top-30">
                <tbody>
                  <tr>
                    <td>Keyword research</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                      <p>Keyword suggestions per search</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p>200</p>
                    </td>
                  </tr>
                  <tr>
                    <td>SERP analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                  </tr>
                </tbody>
              </table>
              <div class="subsribe-btn-wrp">
                <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
        </section>
      </div>
      <div class="col-xs-4 col-sm-4">
        <section class="flipcontainer flip-section2">
          <div class="card flipped">
            <div class="front">
              <div class="frnt-img">
                <i aria-hidden="true" class="fa fa-hourglass-start"></i>
              </div>
              <h3>mangools <span class="clr-gold">Basic</span></h3>
              <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
              <p class="fnt-8 text-center">per month</p>
              <table class="table pricing-tbl mrgn-top-30">
                <tbody>
                  <tr>
                    <td>Keyword research</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                      <p>Keyword suggestions per search</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p>200</p>
                    </td>
                  </tr>
                  <tr>
                    <td>SERP analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                  </tr>
                </tbody>
              </table>
              <div class="subsribe-btn-wrp">
                <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
            <div class="back">
              <div class="frnt-img">
                <i aria-hidden="true" class="fa fa-hourglass-start"></i>
              </div>
              <h3>mangools <span class="clr-gold">Basic</span></h3>
              <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
              <p class="fnt-8 text-center">per month</p>
              <table class="table pricing-tbl mrgn-top-30">
                <tbody>
                  <tr>
                    <td>Keyword research</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                      <p>Keyword suggestions per search</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p>200</p>
                    </td>
                  </tr>
                  <tr>
                    <td>SERP analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p>SERP lookups per 24 hours *</p>
                    </td>
                    <td>
                      <p>100</p>
                    </td>
                  </tr>
                  <tr>
                    <td>Rank tracking</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">Tracked keywords</p>
                      <p class="mrgn-btm-20">Tracked domains</p>
                      <p>Rank updates</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p class="mrgn-btm-20">Unlimited</p>
                      <p>Daily</p>
                    </td>
                  </tr>
                  <tr>
                    <td>Backlink analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td>
                  </tr>
                </tbody>
              </table>
              <div class="subsribe-btn-wrp">
                <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
        </section>
      </div>
      <div class="col-xs-4 col-sm-4">
        <section class="flipcontainer flip-section3">
          <div class="card flipped">
            <div class="front">
              <div class="frnt-img">
                <i aria-hidden="true" class="fa fa-hourglass-start"></i>
              </div>
              <h3>mangools <span class="clr-gold">Basic</span></h3>
              <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
              <p class="fnt-8 text-center">per month</p>
              <table class="table pricing-tbl mrgn-top-30">
                <tbody>
                  <tr>
                    <td>Keyword research</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                      <p>Keyword suggestions per search</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p>200</p>
                    </td>
                  </tr>
                  <tr>
                    <td>SERP analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p>SERP lookups per 24 hours *</p>
                    </td>
                    <td>
                      <p>100</p>
                    </td>
                  </tr>
                  <tr>
                    <td>Rank tracking</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">Tracked keywords</p>
                      <p class="mrgn-btm-20">Tracked domains</p>
                      <p>Rank updates</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p class="mrgn-btm-20">Unlimited</p>
                      <p>Daily</p>
                    </td>
                  </tr>
                  <tr>
                    <td>Backlink analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td>
                  </tr>
                </tbody>
              </table>
              <div class="subsribe-btn-wrp">
                <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
            <div class="back">
              <div class="frnt-img">
                <i aria-hidden="true" class="fa fa-hourglass-start"></i>
              </div>
              <h3>mangools <span class="clr-gold">Basic</span></h3>
              <h2 class="price" data-original-title="" title=""><i aria-hidden="true" class="fa fa-usd"></i>&nbsp;<b>49</b> <sup>00</sup></h2>
              <p class="fnt-8 text-center">per month</p>
              <table class="table pricing-tbl mrgn-top-30">
                <tbody>
                  <tr>
                    <td>Keyword research</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">KWFinder</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">KW lookups per 24 hours</p>
                      <p>Keyword suggestions per search</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p>200</p>
                    </td>
                  </tr>
                  <tr>
                    <td>SERP analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPChecker</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p>SERP lookups per 24 hours *</p>
                    </td>
                    <td>
                      <p>100</p>
                    </td>
                  </tr>
                  <tr>
                    <td>Rank tracking</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">SERPWatcher</a></span></td>
                  </tr>
                  <tr>
                    <td>
                      <p class="mrgn-btm-20">Tracked keywords</p>
                      <p class="mrgn-btm-20">Tracked domains</p>
                      <p>Rank updates</p>
                    </td>
                    <td>
                      <p class="mrgn-btm-20">100</p>
                      <p class="mrgn-btm-20">Unlimited</p>
                      <p>Daily</p>
                    </td>
                  </tr>
                  <tr>
                    <td>Backlink analysis</td>
                    <td><span class="label label-default"><a data-original-title="" href="#" title="">COMING SOON</a></span></td>
                  </tr>
                </tbody>
              </table>
              <div class="subsribe-btn-wrp">
                <button class="btn btn-pi btn-lg radius-2" type="button">Subscribe now <i aria-hidden="true" class="fa fa-chevron-circle-right"></i></button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题