等しい高さの価格表を作成する方法
ハイ👋
このポストでは、Flexboxを使用して等しい高さの価格表を作成する方法を参照してください.
これは、適切な間隔と背景色を提供します
これは
このポストでは、Flexboxを使用して等しい高さの価格表を作成する方法を参照してください.
container
のクラスでDIVを作成します <div class="container">
我々は、現在pricing-grid
の内部で同じクラスcontainer
で3つのDIVをつくります<div class="pricing-grid">
<ul>
<li class="header">Basic</li>
<li>10Gb Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>Endless Support</li>
</ul>
<p class="price">$ 10</p>
<p class="month">per month</p>
<button>Sign Up</button>
</div>
<div class="pricing-grid">
<ul>
<li class="header">Pro</li>
<li>10Gb Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>Endless Support</li>
<li>Free Hosting</li>
</ul>
<p class="price">$ 10</p>
<p class="month">per month</p>
<button>Sign Up</button>
</div>
<div class="pricing-grid">
<ul>
<li class="header">Premium</li>
<li>10Gb Storage</li>
<li>10 Emails</li>
<li>10 Domains</li>
<li>Endless Support</li>
</ul>
<p class="price">$ 10</p>
<p class="month">per month</p>
<button>Sign Up</button>
</div>
CSS
.container{
max-width:1024px;
margin:0 auto;
display:flex;
}
li{
list-style-type:none;
padding:30px;
border-bottom:1px solid rgba(0, 0, 0, 0.3);
}
li:last-child{
border-bottom:0;
}
li.header{
border-bottom:0;
background-color:black;
color:#fff;
padding:20px;
}
ul{
margin:0;
padding:0;
}
button{
padding:12px 20px;
border:none;
background-color:#000;
color:#fff;
align-items:flex-end;
}
これまでのところ、価格表の基本構造を作成しました😲これは、適切な間隔と背景色を提供します
.pricing-grid{
flex-grow:1;
background-color:rgba(0, 0, 0, 0.1);
margin:20px;
text-align:center;
border-radius:4px;
}
期待😀
現実🤷♀️
これは
Nested Flexbox
.pricing-grid{
display:flex;
flex-wrap:wrap;
}
.pricing-grid > *{
flex:1 1 100%;
}
最終的にCenter
へのアイテムの整列.container{
align-items:center;
}
私は、このチュートリアルがあなたを助けたことを望みます.🎉Reference
この問題について(等しい高さの価格表を作成する方法), 我々は、より多くの情報をここで見つけました https://dev.to/pinkylalwani/css-how-to-create-a-pricing-table-of-equal-height-4e27テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol