難易度価格表とボタンの一元化

Question

私は、これらの価格表を集中管理することが難しく、フッターに影響を与えずに価格表の下に[照会]ボタンを集中化することも難しいと思っています。私は物事のカップルを試みたが、それはおそらく、このlink to code pen

を探しているか、あなたはここでそれをテストすることができ

{ 
 
    box-sizing: border-box; 
 
} 
 

 
.columns { 
 
    float: left; 
 
    width: 33.3%; 
 
    padding: 8px; 
 
} 
 

 
.price { 
 
    list-style-type: none; 
 
    border: 1px solid #eee; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-transition: 0.3s; 
 
    transition: 0.3s; 
 
} 
 

 
.price:hover { 
 
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) 
 
} 
 

 
.price .header { 
 
    background-color: #111; 
 
    color: white; 
 
    font-size: 25px; 
 
} 
 

 
.price li { 
 
    border-bottom: 1px solid #eee; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.price .grey { 
 
    background-color: #eee; 
 
    font-size: 20px; 
 
} 
 

 
.button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 10px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
} 
 

 
@media only screen and (max-width: 600px) { 
 
    .columns { 
 
     width: 100%; 
 
    } 
 
}

<div class="plantitle"> 
 
<h2 style="text-align:center">DOLLAR COMPENSATION PLANS</h2> 
 
<p style="text-align:center">Choose A Plan to Sign-Up</p> 
 
</div> 
 
<div class="pricealign"> 
 
<div class="columns"> 
 
    <ul class="price"> 
 
    <li class="header">$10 – 85% payout</li> 
 
    <li class="grey">Level 1 - 5 = $25</li> 
 
    <li>Level 2 – 25 = $106.25</li> 
 
    <li>Level 3 – 125 = $531.25</li> 
 
    <li>Level 4 – 625 = $2,656.25</li> 
 
    <li>Level 5 – 3125 = $13,281.25</li> 
 
    <li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="columns"> 
 
    <ul class="price"> 
 
    <li class="header" style="background-color:#4CAF50">$20 – 85% payout</li> 
 
    <li class="grey">Level 1 - 5 = $60</li> 
 
    <li>Level 2 – 25 = $170</li> 
 
    <li>Level 3 – 125 = $850</li> 
 
    <li>Level 4 – 625 = $4,250</li> 
 
    <li>Level 5 – 3125 = $21,250</li> 
 
    <li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="columns"> 
 
    <ul class="price"> 
 
    <li class="header">$50 – 85% payout</li> 
 
    <li class="grey">Level 1 - 5 = $100</li> 
 
    <li>Level 2 – 25 = $637.5</li> 
 
    <li>Level 3 – 125 = $3,187.5</li> 
 
    <li>Level 4 – 625 = $15,937.5</li> 
 
    <li>Level 5 – 3125 = $79,687.5</li> 
 
    <li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="columns"> 
 
    <ul class="price"> 
 
    <li class="header">$50 – 85% payout</li> 
 
    <li class="grey">Level 1 - 5 = $100</li> 
 
    <li>Level 2 – 25 = $637.5</li> 
 
    <li>Level 3 – 125 = $3,187.5</li> 
 
    <li>Level 4 – 625 = $15,937.5</li> 
 
    <li>Level 5 – 3125 = $79,687.5</li> 
 
    <li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 

 
</div> 
 
<script> 
 
var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     var panel = this.nextElementSibling; 
 
     if (panel.style.display === "block") { 
 
      panel.style.display = "none"; 
 
     } else { 
 
      panel.style.display = "block"; 
 
     } 
 
    } 
 
} 
 
</script> 
 
     
 
<div class="planenq"> 
 
<div class="container"> 
 
    <button class="button"><span><a href="#">For Enquiries</a> </span></button> 
 
    
 
    </div> 
 
</div>

Answer 1

フッターにコンテンツを重ねる終わりました。ここでは画面のサイズのために完全に中央に見えないかもしれませんが、上記で提供したコードペンへのリンク上でテストすれば、完全に集中化されます。

{ 
 
box-sizing: border-box; 
 
} 
 

 
.columns { 
 
float: left; 
 
width: 33.3%; 
 
padding: 8px; 
 
margin: 0 20px 0 50px; 
 
} 
 

 
.price { 
 
list-style-type: none; 
 
border: 1px solid #eee; 
 
margin: 0; 
 
padding: 0; 
 
-webkit-transition: 0.3s; 
 
transition: 0.3s; 
 
} 
 

 
.price:hover { 
 
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) 
 
} 
 

 
.price .header { 
 
background-color: #111; 
 
color: white; 
 
font-size: 25px; 
 
} 
 

 
.price li { 
 
border-bottom: 1px solid #eee; 
 
padding: 20px; 
 
text-align: center; 
 
} 
 

 
.price .grey { 
 
background-color: #eee; 
 
font-size: 20px; 
 
} 
 

 
.button { 
 
background-color: #4CAF50; 
 
border: none; 
 
color: white; 
 
padding: 10px 25px; 
 
text-align: center; 
 
text-decoration: none; 
 
font-size: 18px; 
 
} 
 

 
@media only screen and (max-width: 600px) { 
 
.columns { 
 
    width: 100%; 
 
} 
 
} 
 

 
.pricealign{ 
 
    margin: 10px auto; 
 
    width: 700px; 
 
} 
 

 
.clearfix{ 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    margin: 20px auto; 
 
} 
 

 
#main-container{ 
 
    padding: 0 0 0 20px; 
 
    width: 200px; 
 
}

<div class="plantitle"> 
 
<h2 style="text-align:center">DOLLAR COMPENSATION PLANS</h2> 
 
<p style="text-align:center">Choose A Plan to Sign-Up</p> 
 
</div> 
 
<div id="main-container" class="clearfix"> 
 
<div class="pricealign"> 
 
<div class="columns"> 
 
    <ul class="price"> 
 
<li class="header">$10 – 85% payout</li> 
 
<li class="grey">Level 1 - 5 = $25</li> 
 
<li>Level 2 – 25 = $106.25</li> 
 
<li>Level 3 – 125 = $531.25</li> 
 
<li>Level 4 – 625 = $2,656.25</li> 
 
<li>Level 5 – 3125 = $13,281.25</li> 
 
<li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="columns"> 
 
    <ul class="price"> 
 
<li class="header" style="background-color:#4CAF50">$20 – 85% payout</li> 
 
<li class="grey">Level 1 - 5 = $60</li> 
 
<li>Level 2 – 25 = $170</li> 
 
<li>Level 3 – 125 = $850</li> 
 
<li>Level 4 – 625 = $4,250</li> 
 
<li>Level 5 – 3125 = $21,250</li> 
 
<li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="columns"> 
 
    <ul class="price"> 
 
<li class="header">$50 – 85% payout</li> 
 
<li class="grey">Level 1 - 5 = $100</li> 
 
<li>Level 2 – 25 = $637.5</li> 
 
<li>Level 3 – 125 = $3,187.5</li> 
 
<li>Level 4 – 625 = $15,937.5</li> 
 
<li>Level 5 – 3125 = $79,687.5</li> 
 
<li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="columns"> 
 
    <ul class="price"> 
 
<li class="header">$50 – 85% payout</li> 
 
<li class="grey">Level 1 - 5 = $100</li> 
 
<li>Level 2 – 25 = $637.5</li> 
 
<li>Level 3 – 125 = $3,187.5</li> 
 
<li>Level 4 – 625 = $15,937.5</li> 
 
<li>Level 5 – 3125 = $79,687.5</li> 
 
<li class="grey"><a href="#" class="button">Sign Up</a></li> 
 
    </ul> 
 
</div> 
 
    </div><!--end main-container--> 
 

 
</div> 
 
<script> 
 
var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
acc[i].onclick = function(){ 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.display === "block") { 
 
     panel.style.display = "none"; 
 
    } else { 
 
     panel.style.display = "block"; 
 
    } 
 
} 
 
} 
 
</script> 
 
    
 
<div class="planenq"> 
 
<div class="container"> 
 
<button class="button clearfix"><span><a href="#">For Enquiries</a> </span></button> 
 

 
</div> 
 
</div>